<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Accelerated Shape Detection in Images</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<style data-fill-with="stylesheet">/******************************************************************************
 *                   Style sheet for the W3C specifications                   *
 *
 * Special classes handled by this style sheet include:
 *
 * Indices
 *   - .toc for the Table of Contents (<ol class="toc">)
 *     + <span class="secno"> for the section numbers
 *   - #toc for the Table of Contents (<nav id="toc">)
 *   - ul.index for Indices (<a href="#ref">term</a><span>, in §N.M</span>)
 *   - table.index for Index Tables (e.g. for properties or elements)
 *
 * Structural Markup
 *   - table.data for general data tables
 *     -> use 'scope' attribute, <colgroup>, <thead>, and <tbody> for best results !
 *     -> use <table class='complex data'> for extra-complex tables
 *     -> use <td class='long'> for paragraph-length cell content
 *     -> use <td class='pre'> when manual line breaks/indentation would help readability
 *   - dl.switch for switch statements
 *   - ol.algorithm for algorithms (helps to visualize nesting)
 *   - .figure and .caption (HTML4) and figure and figcaption (HTML5)
 *     -> .sidefigure for right-floated figures
 *   - ins/del
 *
 * Code
 *   - pre and code
 *
 * Special Sections
 *   - .note       for informative notes             (div, p, span, aside, details)
 *   - .example    for informative examples          (div, p, pre, span)
 *   - .issue      for issues                        (div, p, span)
 *   - .assertion  for assertions                    (div, p, span)
 *   - .advisement for loud normative statements     (div, p, strong)
 *   - .annoying-warning for spec obsoletion notices (div, aside, details)
 *
 * Definition Boxes
 *   - pre.def   for WebIDL definitions
 *   - table.def for tables that define other entities (e.g. CSS properties)
 *   - dl.def    for definition lists that define other entitles (e.g. HTML elements)
 *
 * Numbering
 *   - .secno for section numbers in .toc and headings (<span class='secno'>3.2</span>)
 *   - .marker for source-inserted example/figure/issue numbers (<span class='marker'>Issue 4</span>)
 *   - ::before styled for CSS-generated issue/example/figure numbers:
 *     -> Documents wishing to use this only need to add
 *        figcaption::before,
 *        .caption::before { content: "Figure "  counter(figure) " ";  }
 *        .example::before { content: "Example " counter(example) " "; }
 *        .issue::before   { content: "Issue "   counter(issue) " ";   }
 *
 * Header Stuff (ignore, just don't conflict with these classes)
 *   - .head for the header
 *   - .copyright for the copyright
 *
 * Miscellaneous
 *   - .overlarge for things that should be as wide as possible, even if
 *     that overflows the body text area. This can be used on an item or
 *     on its container, depending on the effect desired.
 *     Note that this styling basically doesn't help at all when printing,
 *     since A4 paper isn't much wider than the max-width here.
 *     It's better to design things to fit into a narrower measure if possible.
 *   - js-added ToC jump links (see fixup.js)
 *
 ******************************************************************************/

/******************************************************************************/
/*                                   Body                                     */
/******************************************************************************/

	body {
		counter-reset: example figure issue;

		/* Layout */
		max-width: 50em;               /* limit line length to 50em for readability   */
		margin: 0 auto;                /* center text within page                     */
		padding: 1.6em 1.5em 2em 50px; /* assume 16px font size for downlevel clients */
		padding: 1.6em 1.5em 2em calc(26px + 1.5em); /* leave space for status flag     */

		/* Typography */
		line-height: 1.5;
		font-family: sans-serif;
		widows: 2;
		orphans: 2;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;

		/* Colors */
		color: black;
		background: white top left fixed no-repeat;
		background-size: 25px auto;
	}


/******************************************************************************/
/*                         Front Matter & Navigation                          */
/******************************************************************************/

/** Header ********************************************************************/

	div.head { margin-bottom: 1em }
	div.head hr { border-style: solid; }

	div.head h1 {
		font-weight: bold;
		margin: 0 0 .1em;
		font-size: 220%;
	}

	div.head h2 { margin-bottom: 1.5em;}

/** W3C Logo ******************************************************************/

	.head .logo {
		float: right;
		margin: 0.4rem 0 0.2rem .4rem;
	}

	.head img[src*="logos/W3C"] {
		display: block;
		border: solid #1a5e9a;
		border-width: .65rem .7rem .6rem;
		border-radius: .4rem;
		background: #1a5e9a;
		color: white;
		font-weight: bold;
	}

	.head a:hover > img[src*="logos/W3C"],
	.head a:focus > img[src*="logos/W3C"] {
		opacity: .8;
	}

	.head a:active > img[src*="logos/W3C"] {
		background: #c00;
		border-color: #c00;
	}

	/* see also additional rules in Link Styling section */

/** Copyright *****************************************************************/

	p.copyright,
	p.copyright small { font-size: small }

/** Back to Top / ToC Toggle **************************************************/

	@media print {
		#toc-nav {
			display: none;
		}
	}
	@media not print {
		#toc-nav {
			position: fixed;
			z-index: 2;
			bottom: 0; left: 0;
			margin: 0;
			min-width: 1.33em;
			border-top-right-radius: 2rem;
			box-shadow: 0 0 2px;
			font-size: 1.5em;
			color: black;
		}
		#toc-nav > a {
			display: block;
			white-space: nowrap;

			height: 1.33em;
			padding: .1em 0.3em;
			margin: 0;

			background: white;
			box-shadow: 0 0 2px;
			border: none;
			border-top-right-radius: 1.33em;
			background: white;
		}
		#toc-nav > #toc-jump {
			padding-bottom: 2em;
			margin-bottom: -1.9em;
		}

		#toc-nav > a:hover,
		#toc-nav > a:focus {
			background: #f8f8f8;
		}
		#toc-nav > a:not(:hover):not(:focus) {
			color: #707070;
		}

		/* statusbar gets in the way on keyboard focus; remove once browsers fix */
		#toc-nav > a[href="#toc"]:not(:hover):focus:last-child {
			padding-bottom: 1.5rem;
		}

		#toc-nav:not(:hover) > a:not(:focus) > span + span {
			/* Ideally this uses :focus-within on #toc-nav */
			display: none;
		}
		#toc-nav > a > span + span {
			padding-right: 0.2em;
		}

		#toc-toggle-inline {
			vertical-align: 0.05em;
			font-size: 80%;
			color: gray;
			color: hsla(203,20%,40%,.7);
			border-style: none;
			background: transparent;
			position: relative;
		}
		#toc-toggle-inline:hover:not(:active),
		#toc-toggle-inline:focus:not(:active) {
			text-shadow: 1px 1px silver;
			top: -1px;
			left: -1px;
		}

		#toc-nav :active {
			color: #C00;
		}
	}

/** ToC Sidebar ***************************************************************/

	/* Floating sidebar */
	@media screen {
		body.toc-sidebar #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			max-width: 80%;
			max-width: calc(100% - 2em - 26px);
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body.toc-sidebar #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}
		body.toc-sidebar #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	/* Hide main scroller when only the ToC is visible anyway */
	@media screen and (max-width: 28em) {
		body.toc-sidebar {
			overflow: hidden;
		}
	}

	/* Sidebar with its own space */
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body:not(.toc-inline) #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}

		body:not(.toc-inline) {
			padding-left: 29em;
		}
		/* See also Overflow section at the bottom */

		body:not(.toc-inline) #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) {
			margin: 0 4em;
		}
	}

/******************************************************************************/
/*                                Sectioning                                  */
/******************************************************************************/

/** Headings ******************************************************************/

	h1, h2, h3, h4, h5, h6, dt {
		page-break-after: avoid;
		page-break-inside: avoid;
		font: 100% sans-serif;   /* Reset all font styling to clear out UA styles */
		font-family: inherit;    /* Inherit the font family. */
		line-height: 1.2;        /* Keep wrapped headings compact */
		hyphens: manual;         /* Hyphenated headings look weird */
	}

	h2, h3, h4, h5, h6 {
		margin-top: 3rem;
	}

	h1, h2, h3 {
		color: #005A9C;
		background: transparent;
	}

	h1 { font-size: 170%; }
	h2 { font-size: 140%; }
	h3 { font-size: 120%; }
	h4 { font-weight: bold; }
	h5 { font-style: italic; }
	h6 { font-variant: small-caps; }
	dt { font-weight: bold; }

/** Subheadings ***************************************************************/

	h1 + h2,
	#subtitle {
		/* #subtitle is a subtitle in an H2 under the H1 */
		margin-top: 0;
	}
	h2 + h3,
	h3 + h4,
	h4 + h5,
	h5 + h6 {
		margin-top: 1.2em; /* = 1 x line-height */
	}

/** Section divider ***********************************************************/

	:not(.head) > hr {
		font-size: 1.5em;
		text-align: center;
		margin: 1em auto;
		height: auto;
		border: transparent solid 0;
		background: transparent;
	}
	:not(.head) > hr::before {
		content: "\2727\2003\2003\2727\2003\2003\2727";
	}

/******************************************************************************/
/*                            Paragraphs and Lists                            */
/******************************************************************************/

	p {
		margin: 1em 0;
	}

	dd > p:first-child,
	li > p:first-child {
		margin-top: 0;
	}

	ul, ol {
		margin-left: 0;
		padding-left: 2em;
	}

	li {
		margin: 0.25em 0 0.5em;
		padding: 0;
	}

	dl dd {
		margin: 0 0 .5em 2em;
	}

	.head dd + dd { /* compact for header */
		margin-top: -.5em;
	}

	/* Style for algorithms */
	ol.algorithm ol:not(.algorithm),
	.algorithm > ol ol:not(.algorithm) {
	 border-left: 0.5em solid #DEF;
	}

	/* Put nice boxes around each algorithm. */
	[data-algorithm]:not(.heading) {
	  padding: .5em;
	  border: thin solid #ddd; border-radius: .5em;
	  margin: .5em calc(-0.5em - 1px);
	}
	[data-algorithm]:not(.heading) > :first-child {
	  margin-top: 0;
	}
	[data-algorithm]:not(.heading) > :last-child {
	  margin-bottom: 0;
	}

	/* Style for switch/case <dl>s */
	dl.switch > dd > ol.only,
	dl.switch > dd > .only > ol {
	 margin-left: 0;
	}
	dl.switch > dd > ol.algorithm,
	dl.switch > dd > .algorithm > ol {
	 margin-left: -2em;
	}
	dl.switch {
	 padding-left: 2em;
	}
	dl.switch > dt {
	 text-indent: -1.5em;
	 margin-top: 1em;
	}
	dl.switch > dt + dt {
	 margin-top: 0;
	}
	dl.switch > dt::before {
	 content: '\21AA';
	 padding: 0 0.5em 0 0;
	 display: inline-block;
	 width: 1em;
	 text-align: right;
	 line-height: 0.5em;
	}

/** Terminology Markup ********************************************************/


/******************************************************************************/
/*                                 Inline Markup                              */
/******************************************************************************/

/** Terminology Markup ********************************************************/
	dfn   { /* Defining instance */
		font-weight: bolder;
	}
	a > i { /* Instance of term */
		font-style: normal;
	}
	dt dfn code, code.idl {
		font-size: medium;
	}
	dfn var {
		font-style: normal;
	}

/** Change Marking ************************************************************/

	del { color: red;  text-decoration: line-through; }
	ins { color: #080; text-decoration: underline;    }

/** Miscellaneous improvements to inline formatting ***************************/

	sup {
		vertical-align: super;
		font-size: 80%
	}

/******************************************************************************/
/*                                    Code                                    */
/******************************************************************************/

/** General monospace/pre rules ***********************************************/

	pre, code, samp {
		font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
		font-size: .9em;
		page-break-inside: avoid;
		hyphens: none;
		text-transform: none;
	}
	pre code,
	code code {
		font-size: 100%;
	}

	pre {
		margin-top: 1em;
		margin-bottom: 1em;
		overflow: auto;
	}

/** Inline Code fragments *****************************************************/

  /* Do something nice. */

/******************************************************************************/
/*                                    Links                                   */
/******************************************************************************/

/** General Hyperlinks ********************************************************/

	/* We hyperlink a lot, so make it less intrusive */
	a[href] {
		color: #034575;
		text-decoration: none;
		border-bottom: 1px solid #707070;
		/* Need a bit of extending for it to look okay */
		padding: 0 1px 0;
		margin: 0 -1px 0;
	}
	a:visited {
		border-bottom-color: #BBB;
	}

	/* Use distinguishing colors when user is interacting with the link */
	a[href]:focus,
	a[href]:hover {
		background: #f8f8f8;
		background: rgba(75%, 75%, 75%, .25);
		border-bottom-width: 3px;
		margin-bottom: -2px;
	}
	a[href]:active {
		color: #C00;
		border-color: #C00;
	}

	/* Backout above styling for W3C logo */
	.head .logo,
	.head .logo a {
		border: none;
		text-decoration: none;
		background: transparent;
	}

/******************************************************************************/
/*                                    Images                                  */
/******************************************************************************/

	img {
		border-style: none;
	}

	/* For autogen numbers, add
	   .caption::before, figcaption::before { content: "Figure " counter(figure) ". "; }
	*/

	figure, .figure, .sidefigure {
		page-break-inside: avoid;
		text-align: center;
		margin: 2.5em 0;
	}
	.figure img,    .sidefigure img,    figure img,
	.figure object, .sidefigure object, figure object {
		max-width: 100%;
		margin: auto;
	}
	.figure pre, .sidefigure pre, figure pre {
		text-align: left;
		display: table;
		margin: 1em auto;
	}
	.figure table, figure table {
		margin: auto;
	}
	@media screen and (min-width: 20em) {
		.sidefigure {
			float: right;
			width: 50%;
			margin: 0 0 0.5em 0.5em
		}
	}
	.caption, figcaption, caption {
		font-style: italic;
		font-size: 90%;
	}
	.caption::before, figcaption::before, figcaption > .marker {
		font-weight: bold;
	}
	.caption, figcaption {
		counter-increment: figure;
	}

	/* DL list is indented 2em, but figure inside it is not */
	dd > .figure, dd > figure { margin-left: -2em }

/******************************************************************************/
/*                             Colored Boxes                                  */
/******************************************************************************/

	.issue, .note, .example, .assertion, .advisement, blockquote {
		padding: .5em;
		border: .5em;
		border-left-style: solid;
		page-break-inside: avoid;
	}
	span.issue, span.note {
		padding: .1em .5em .15em;
		border-right-style: solid;
	}

	.issue,
	.note,
	.example,
	.advisement,
	.assertion,
	blockquote {
		margin: 1em auto;
	}
	.note  > p:first-child,
	.issue > p:first-child,
	blockquote > :first-child {
		margin-top: 0;
	}
	blockquote > :last-child {
		margin-bottom: 0;
	}

/** Blockquotes ***************************************************************/

	blockquote {
		border-color: silver;
	}

/** Open issue ****************************************************************/

	.issue {
		border-color: #E05252;
		background: #FBE9E9;
		counter-increment: issue;
		overflow: auto;
	}
	.issue::before, .issue > .marker {
		text-transform: uppercase;
		color: #AE1E1E;
		padding-right: 1em;
		text-transform: uppercase;
	}
	/* Add .issue::before { content: "Issue " counter(issue) " "; } for autogen numbers,
	   or use class="marker" to mark up the issue number in source. */

/** Example *******************************************************************/

	.example {
		border-color: #E0CB52;
		background: #FCFAEE;
		counter-increment: example;
		overflow: auto;
		clear: both;
	}
	.example::before, .example > .marker {
		text-transform: uppercase;
		color: #827017;
		min-width: 7.5em;
		display: block;
	}
	/* Add .example::before { content: "Example " counter(example) " "; } for autogen numbers,
	   or use class="marker" to mark up the example number in source. */

/** Non-normative Note ********************************************************/

	.note {
		border-color: #52E052;
		background: #E9FBE9;
		overflow: auto;
	}

	.note::before, .note > .marker,
	details.note > summary::before,
	details.note > summary > .marker {
		text-transform: uppercase;
		display: block;
		color: hsl(120, 70%, 30%);
	}
	/* Add .note::before { content: "Note"; } for autogen label,
	   or use class="marker" to mark up the label in source. */

	details.note > summary {
		display: block;
		color: hsl(120, 70%, 30%);
	}
	details.note[open] > summary {
		border-bottom: 1px silver solid;
	}

/** Assertion Box *************************************************************/
	/*  for assertions in algorithms */

	.assertion {
		border-color: #AAA;
		background: #EEE;
	}

/** Advisement Box ************************************************************/
	/*  for attention-grabbing normative statements */

	.advisement {
		border-color: orange;
		border-style: none solid;
		background: #FFEECC;
	}
	strong.advisement {
		display: block;
		text-align: center;
	}
	.advisement > .marker {
		color: #B35F00;
	}

/** Spec Obsoletion Notice ****************************************************/
	/* obnoxious obsoletion notice for older/abandoned specs. */

	details {
		display: block;
	}
	summary {
		font-weight: bolder;
	}

	.annoying-warning:not(details),
	details.annoying-warning:not([open]) > summary,
	details.annoying-warning[open] {
		background: #fdd;
		color: red;
		font-weight: bold;
		padding: .75em 1em;
		border: thick red;
		border-style: solid;
		border-radius: 1em;
	}
	.annoying-warning :last-child {
		margin-bottom: 0;
	}

@media not print {
	details.annoying-warning[open] {
		position: fixed;
		left: 1em;
		right: 1em;
		bottom: 1em;
		z-index: 1000;
	}
}

	details.annoying-warning:not([open]) > summary {
		text-align: center;
	}

/** Entity Definition Boxes ***************************************************/

	.def {
		padding: .5em 1em;
		background: #DEF;
		margin: 1.2em 0;
		border-left: 0.5em solid #8CCBF2;
	}

/******************************************************************************/
/*                                    Tables                                  */
/******************************************************************************/

	th, td {
		text-align: left;
		text-align: start;
	}

/** Property/Descriptor Definition Tables *************************************/

	table.def {
		/* inherits .def box styling, see above */
		width: 100%;
		border-spacing: 0;
	}

	table.def td,
	table.def th {
		padding: 0.5em;
		vertical-align: baseline;
		border-bottom: 1px solid #bbd7e9;
	}

	table.def > tbody > tr:last-child th,
	table.def > tbody > tr:last-child td {
		border-bottom: 0;
	}

	table.def th {
		font-style: italic;
		font-weight: normal;
		padding-left: 1em;
		width: 3em;
	}

	/* For when values are extra-complex and need formatting for readability */
	table td.pre {
		white-space: pre-wrap;
	}

	/* A footnote at the bottom of a def table */
	table.def           td.footnote {
		padding-top: 0.6em;
	}
	table.def           td.footnote::before {
		content: " ";
		display: block;
		height: 0.6em;
		width: 4em;
		border-top: thin solid;
	}

/** Data tables (and properly marked-up index tables) *************************/
	/*
		 <table class="data"> highlights structural relationships in a table
		 when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

		 Use class="complex data" for particularly complicated tables --
		 (This will draw more lines: busier, but clearer.)

		 Use class="long" on table cells with paragraph-like contents
		 (This will adjust text alignment accordingly.)
		 Alternately use class="longlastcol" on tables, to have the last column assume "long".
	*/

	table {
		word-wrap: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	table.data,
	table.index {
		margin: 1em auto;
		border-collapse: collapse;
		border: hidden;
		width: 100%;
	}
	table.data caption,
	table.index caption {
		max-width: 50em;
		margin: 0 auto 1em;
	}

	table.data td,  table.data th,
	table.index td, table.index th {
		padding: 0.5em 1em;
		border-width: 1px;
		border-color: silver;
		border-top-style: solid;
	}

	table.data thead td:empty {
		padding: 0;
		border: 0;
	}

	table.data  thead,
	table.index thead,
	table.data  tbody,
	table.index tbody {
		border-bottom: 2px solid;
	}

	table.data colgroup,
	table.index colgroup {
		border-left: 2px solid;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		border-right: 2px solid;
		border-top: 1px solid silver;
		padding-right: 1em;
	}

	table.data th[colspan],
	table.data td[colspan] {
		text-align: center;
	}

	table.complex.data th,
	table.complex.data td {
		border: 1px solid silver;
		text-align: center;
	}

	table.data.longlastcol td:last-child,
	table.data td.long {
	 vertical-align: baseline;
	 text-align: left;
	}

	table.data img {
		vertical-align: middle;
	}


/*
Alternate table alignment rules

	table.data,
	table.index {
		text-align: center;
	}

	table.data  thead th[scope="row"],
	table.index thead th[scope="row"] {
		text-align: right;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		text-align: right;
	}

Possible extra rowspan handling

	table.data  tbody th[rowspan]:not([rowspan='1']),
	table.index tbody th[rowspan]:not([rowspan='1']),
	table.data  tbody td[rowspan]:not([rowspan='1']),
	table.index tbody td[rowspan]:not([rowspan='1']) {
		border-left: 1px solid silver;
	}

	table.data  tbody th[rowspan]:first-child,
	table.index tbody th[rowspan]:first-child,
	table.data  tbody td[rowspan]:first-child,
	table.index tbody td[rowspan]:first-child{
		border-left: 0;
		border-right: 1px solid silver;
	}
*/

/******************************************************************************/
/*                                  Indices                                   */
/******************************************************************************/


/** Table of Contents *********************************************************/

	.toc a {
		/* More spacing; use padding to make it part of the click target. */
		padding-top: 0.1rem;
		/* Larger, more consistently-sized click target */
		display: block;
		/* Reverse color scheme */
		color: black;
		border-color: #3980B5;
		border-bottom-width: 3px !important;
		margin-bottom: 0px !important;
	}
	.toc a:visited {
		border-color: #054572;
	}
	.toc a:not(:focus):not(:hover) {
		/* Allow colors to cascade through from link styling */
		border-bottom-color: transparent;
	}

	.toc, .toc ol, .toc ul, .toc li {
		list-style: none; /* Numbers must be inlined into source */
		/* because generated content isn't search/selectable and markers can't do multilevel yet */
		margin:  0;
		padding: 0;
		line-height: 1.1rem; /* consistent spacing */
	}

	/* ToC not indented until third level, but font style & margins show hierarchy */
	.toc > li             { font-weight: bold;   }
	.toc > li li          { font-weight: normal; }
	.toc > li li li       { font-size:   95%;    }
	.toc > li li li li    { font-size:   90%;    }
	.toc > li li li li .secno { font-size: 85%; }
	.toc > li li li li li { font-size:   85%;    }
	.toc > li li li li li .secno { font-size: 100%; }

	/* @supports not (display:grid) { */
		.toc > li             { margin: 1.5rem 0;    }
		.toc > li li          { margin: 0.3rem 0;    }
		.toc > li li li       { margin-left: 2rem;   }

		/* Section numbers in a column of their own */
		.toc .secno {
			float: left;
			width: 4rem;
			white-space: nowrap;
		}

		.toc li {
			clear: both;
		}

		:not(li) > .toc              { margin-left:  5rem; }
		.toc .secno                  { margin-left: -5rem; }
		.toc > li li li .secno       { margin-left: -7rem; }
		.toc > li li li li .secno    { margin-left: -9rem; }
		.toc > li li li li li .secno { margin-left: -11rem; }

		/* Tighten up indentation in narrow ToCs */
		@media (max-width: 30em) {
			:not(li) > .toc              { margin-left:  4rem; }
			.toc .secno                  { margin-left: -4rem; }
			.toc > li li li              { margin-left:  1rem; }
			.toc > li li li .secno       { margin-left: -5rem; }
			.toc > li li li li .secno    { margin-left: -6rem; }
			.toc > li li li li li .secno { margin-left: -7rem; }
		}
	/* } */

	@supports (display:grid) and (display:contents) {
		/* Use #toc over .toc to override non-@supports rules. */
		#toc {
			display: grid;
			align-content: start;
			grid-template-columns: auto 1fr;
			grid-column-gap: 1rem;
			column-gap: 1rem;
			grid-row-gap: .6rem;
			row-gap: .6rem;
		}
		#toc h2 {
			grid-column: 1 / -1;
			margin-bottom: 0;
		}
		#toc ol,
		#toc li,
		#toc a {
			display: contents;
			/* Switch <a> to subgrid when supported */
		}
		#toc span {
			margin: 0;
		}
		#toc > .toc > li > a > span {
			/* The spans of the top-level list,
			   comprising the first items of each top-level section. */
			margin-top: 1.1rem;
		}
		#toc#toc .secno { /* Ugh, need more specificity to override base.css */
			grid-column: 1;
			width: auto;
			margin-left: 0;
		}
		#toc .content {
			grid-column: 2;
			width: auto;
			margin-right: 1rem;
		}
		#toc .content:hover {
			background: rgba(75%, 75%, 75%, .25);
			border-bottom: 3px solid #054572;
			margin-bottom: -3px;
		}
		#toc li li li .content {
			margin-left: 1rem;
		}
		#toc li li li li .content {
			margin-left: 2rem;
		}
	}


/** Index *********************************************************************/

	/* Index Lists: Layout */
	ul.index       { margin-left: 0; columns: 15em; text-indent: 1em hanging; }
	ul.index li    { margin-left: 0; list-style: none; break-inside: avoid; }
	ul.index li li { margin-left: 1em }
	ul.index dl    { margin-top: 0; }
	ul.index dt    { margin: .2em 0 .2em 20px;}
	ul.index dd    { margin: .2em 0 .2em 40px;}
	/* Index Lists: Typography */
	ul.index ul,
	ul.index dl { font-size: smaller; }
	@media not print {
		ul.index li span {
			white-space: nowrap;
			color: transparent; }
		ul.index li a:hover + span,
		ul.index li a:focus + span {
			color: #707070;
		}
	}

/** Index Tables *****************************************************/
	/* See also the data table styling section, which this effectively subclasses */

	table.index {
		font-size: small;
		border-collapse: collapse;
		border-spacing: 0;
		text-align: left;
		margin: 1em 0;
	}

	table.index td,
	table.index th {
		padding: 0.4em;
	}

	table.index tr:hover td:not([rowspan]),
	table.index tr:hover th:not([rowspan]) {
		background: #f7f8f9;
	}

	/* The link in the first column in the property table (formerly a TD) */
	table.index th:first-child a {
		font-weight: bold;
	}

/******************************************************************************/
/*                                    Print                                   */
/******************************************************************************/

	@media print {
		/* Pages have their own margins. */
		html {
			margin: 0;
		}
		/* Serif for print. */
		body {
			font-family: serif;
		}
	}
	@page {
		margin: 1.5cm 1.1cm;
	}

/******************************************************************************/
/*                                    Legacy                                  */
/******************************************************************************/

	/* This rule is inherited from past style sheets. No idea what it's for. */
	.hide { display: none }



/******************************************************************************/
/*                             Overflow Control                               */
/******************************************************************************/

	.figure .caption, .sidefigure .caption, figcaption {
		/* in case figure is overlarge, limit caption to 50em */
		max-width: 50rem;
		margin-left: auto;
		margin-right: auto;
	}
	.overlarge {
		/* Magic to create good table positioning:
		   "content column" is 50ems wide at max; less on smaller screens.
		   Extra space (after ToC + content) is empty on the right.

		   1. When table < content column, centers table in column.
		   2. When content < table < available, left-aligns.
		   3. When table > available, fills available + scroll bar.
		*/ 
		display: grid;
		grid-template-columns: minmax(0, 50em);
	}
	.overlarge > table {
		/* limit preferred width of table */
		max-width: 50em;
		margin-left: auto;
		margin-right: auto;
	}

	@media (min-width: 55em) {
		.overlarge {
			margin-right: calc(13px + 26.5rem - 50vw);
			max-width: none;
		}
	}
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) .overlarge {
			/* 30.5em body padding 50em content area */
			margin-right: calc(40em - 50vw) !important;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) .overlarge {
			/* 4em html margin 30.5em body padding 50em content area */
			margin-right: calc(84.5em - 100vw) !important;
		}
	}

	@media not print {
		.overlarge {
			overflow-x: auto;
			/* See Lea Verou's explanation background-attachment:
			 * http://lea.verou.me/2012/04/background-attachment-local/
			 *
			background: top left  / 4em 100% linear-gradient(to right,  #ffffff, rgba(255, 255, 255, 0)) local,
			            top right / 4em 100% linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)) local,
			            top left  / 1em 100% linear-gradient(to right,  #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            top right / 1em 100% linear-gradient(to left, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            white;
			background-repeat: no-repeat;
			*/
		}
	}
</style>
  <link href="https://www.w3.org/StyleSheets/TR/2016/cg-draft" rel="stylesheet">
  <link href="https://wicg.github.io/shape-detection-api" rel="canonical">
<style>
table {
  border-collapse: collapse;
  border-left-style: hidden;
  border-right-style: hidden;
  text-align: left;
}
table caption {
  font-weight: bold;
  padding: 3px;
  text-align: left;
}
table td, table th {
  border: 1px solid black;
  padding: 3px;
}
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"></p>
   <h1 class="p-name no-ref" id="title">Accelerated Shape Detection in Images</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Draft Community Group Report, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://wicg.github.io/shape-detection-api">https://wicg.github.io/shape-detection-api</a>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard" data-editor-id="82825"><a class="p-name fn u-email email" href="mailto:mcasas@google.com">Miguel Casas-Sanchez</a> (<a class="p-org org" href="https://www.google.com">Google LLC</a>)
     <dd class="editor p-author h-card vcard" data-editor-id="83788"><a class="p-name fn u-email email" href="mailto:reillyg@google.com">Reilly Grant</a> (<a class="p-org org" href="https://www.google.com">Google LLC</a>)
     <dt>Translations <small>(non-normative)</small>:
     <dd><span title="Simplified Chinese"><a href="https://wicg.github.io/shape-detection-api/index-zh-cn.html" hreflang="zh-cn" lang="zh-cn" rel="alternate">简体中文</a></span>
     <dt>Participate:
     <dd><a href="https://www.w3.org/community/wicg/">Join the W3C Community Group</a>
     <dd><a href="https://github.com/WICG/shape-detection-api">Fix the text through GitHub</a>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 the Contributors to the Accelerated Shape Detection in Images Specification, published by the <a href="https://www.w3.org/community/wicg/">Web Platform Incubator Community Group</a> under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a>.
A human-readable <a href="http://www.w3.org/community/about/agreements/cla-deed/">summary</a> is available. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This document describes an API providing access to accelerated shape detectors (e.g. human faces) for still images and/or live image feeds.</p>
  </div>
  <div data-fill-with="at-risk"></div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This specification was published by the <a href="https://www.w3.org/community/wicg/">Web Platform Incubator Community Group</a>.
  It is not a W3C Standard nor is it on the W3C Standards Track.

  Please note that under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a> there is a limited opt-out and other conditions apply.

  Learn more about <a href="http://www.w3.org/community/">W3C Community and Business Groups</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#introduction"><span class="secno">1</span> <span class="content">Introduction</span></a>
     <ol class="toc">
      <li><a href="#use-cases"><span class="secno">1.1</span> <span class="content">Shape detection use cases</span></a>
     </ol>
    <li>
     <a href="#api"><span class="secno">2</span> <span class="content">Shape Detection API</span></a>
     <ol class="toc">
      <li><a href="#image-sources-for-detection"><span class="secno">2.1</span> <span class="content">Image sources for detection</span></a>
      <li>
       <a href="#face-detection-api"><span class="secno">2.2</span> <span class="content">Face Detection API</span></a>
       <ol class="toc">
        <li><a href="#facedetectoroptions-section"><span class="secno">2.2.1</span> <span class="content"><code class="idl"><span>FaceDetectorOptions</span></code></span></a>
        <li><a href="#detectedface-section"><span class="secno">2.2.2</span> <span class="content"><code class="idl"><span>DetectedFace</span></code></span></a>
       </ol>
      <li>
       <a href="#barcode-detection-api"><span class="secno">2.3</span> <span class="content">Barcode Detection API</span></a>
       <ol class="toc">
        <li><a href="#barcodedetectoroptions-section"><span class="secno">2.3.1</span> <span class="content"><code class="idl"><span>BarcodeDetectorOptions</span></code></span></a>
        <li><a href="#detectedbarcode-section"><span class="secno">2.3.2</span> <span class="content"><code class="idl"><span>DetectedBarcode</span></code></span></a>
        <li><a href="#barcodeformat-section"><span class="secno">2.3.3</span> <span class="content"><code class="idl"><span>BarcodeFormat</span></code></span></a>
       </ol>
     </ol>
    <li><a href="#security-and-privacy-considerations"><span class="secno">3</span> <span class="content">Security and Privacy Considerations</span></a>
    <li>
     <a href="#examples"><span class="secno">4</span> <span class="content">Examples</span></a>
     <ol class="toc">
      <li><a href="#example-feature-detection"><span class="secno">4.1</span> <span class="content">Platform support for a given detector</span></a>
      <li><a href="#example-face-detection"><span class="secno">4.2</span> <span class="content">Face Detection</span></a>
      <li><a href="#example-barcode-detection"><span class="secno">4.3</span> <span class="content">Barcode Detection</span></a>
     </ol>
    <li><a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="introduction"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#introduction"></a></h2>
   <p>Photos and images constitute the largest chunk of the Web, and many include recognisable features, such as human faces or barcordes/QR codes. Detecting these features is computationally expensive, but would lead to interesting use cases e.g. face tagging, or web URL redirection. While hardware manufacturers have been supporting these features for a long time, Web Apps do not yet have access to these hardware capabilities, which makes the use of computationally demanding libraries necessary.</p>
   <p class="note" role="note"> Text Detection, despite being an interesting field, is not considered stable enough across neither computing platforms nor character sets to be standarized in the context of this document. For reference a sister informative specification is kept in <a data-link-type="biblio" href="#biblio-text-detection-api">[TEXT-DETECTION-API]</a>. </p>
   <h3 class="heading settled" data-level="1.1" id="use-cases"><span class="secno">1.1. </span><span class="content">Shape detection use cases</span><a class="self-link" href="#use-cases"></a></h3>
   <p>Please see the <a href="https://github.com/WICG/shape-detection-api/blob/master/README.md">Readme/Explainer</a> in the repository.</p>
   <h2 class="heading settled" data-level="2" id="api"><span class="secno">2. </span><span class="content">Shape Detection API</span><a class="self-link" href="#api"></a></h2>
   <p>Individual browsers MAY provide Detectors indicating the availability of hardware providing accelerated operation.</p>
   <h3 class="heading settled" data-level="2.1" id="image-sources-for-detection"><span class="secno">2.1. </span><span class="content">Image sources for detection</span><a class="self-link" href="#image-sources-for-detection"></a></h3>
   <p class="note" role="note"> This section is inspired by <a href="https://www.w3.org/TR/2dcontext/#image-sources-for-2d-rendering-contexts">HTML Canvas 2D Context §image-sources-for-2d-rendering-contexts</a>. </p>
   <p><code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmapsource" id="ref-for-imagebitmapsource">ImageBitmapSource</a></code> allows objects implementing any of a number of interfaces to be used as image sources for the detection process.</p>
   <ul>
    <li data-md>
     <p>When an <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmapsource" id="ref-for-imagebitmapsource①">ImageBitmapSource</a></code> object represents an <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/embedded-content.html#htmlimageelement" id="ref-for-htmlimageelement">HTMLImageElement</a></code>, the element’s image must be used as the source image. Specifically, when an <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmapsource" id="ref-for-imagebitmapsource②">ImageBitmapSource</a></code> object represents an animated image in an <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/embedded-content.html#htmlimageelement" id="ref-for-htmlimageelement①">HTMLImageElement</a></code>, the user agent must use the default image of the animation (the one that the format defines is to be used when animation is not supported or is disabled), or, if there is no such image, the first frame of the animation.</p>
    <li data-md>
     <p>When an <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmapsource" id="ref-for-imagebitmapsource③">ImageBitmapSource</a></code> object represents an <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/media.html#htmlvideoelement" id="ref-for-htmlvideoelement">HTMLVideoElement</a></code>, then the frame at the current playback position when the method with the argument is invoked must be used as the source image when processing the image, and the source image’s dimensions must be the <a href="https://drafts.csswg.org/css2/conform.html#intrinsic">intrinsic dimensions</a> of the media resource (i.e. after any aspect-ratio correction has been applied).</p>
    <li data-md>
     <p>When an <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmapsource" id="ref-for-imagebitmapsource④">ImageBitmapSource</a></code> object represents an <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/canvas.html#htmlcanvaselement" id="ref-for-htmlcanvaselement">HTMLCanvasElement</a></code>, the element’s bitmap must be used as the source image.</p>
   </ul>
   <p>When the UA is required to use a given type of <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmapsource" id="ref-for-imagebitmapsource⑤">ImageBitmapSource</a></code> as input argument for the <code>detect()</code> method of whichever detector, it MUST run these steps:</p>
   <ul>
    <li data-md>
     <p>If any <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmapsource" id="ref-for-imagebitmapsource⑥">ImageBitmapSource</a></code> have an effective script origin (<span spec-section="#concept-origin"></span>) which is not the same as the Document’s effective script origin, then reject the Promise with a new <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException">DOMException</a></code> whose name is <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#securityerror" id="ref-for-securityerror">SecurityError</a></code>.</p>
    <li data-md>
     <p>If the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmapsource" id="ref-for-imagebitmapsource⑦">ImageBitmapSource</a></code> is an <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/embedded-content.html#htmlimageelement" id="ref-for-htmlimageelement②">HTMLImageElement</a></code> object that is in the <code>Broken</code> (<span spec-section="#img-error"></span>) state, then reject the Promise with a new <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException①">DOMException</a></code> whose name is <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror">InvalidStateError</a></code>, and abort any further steps.</p>
    <li data-md>
     <p>If the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmapsource" id="ref-for-imagebitmapsource⑧">ImageBitmapSource</a></code> is an <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/embedded-content.html#htmlimageelement" id="ref-for-htmlimageelement③">HTMLImageElement</a></code> object that is not fully decodable then reject the Promise with a new <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException②">DOMException</a></code> whose name is <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror①">InvalidStateError</a></code>, and abort any further steps</p>
    <li data-md>
     <p>If the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmapsource" id="ref-for-imagebitmapsource⑨">ImageBitmapSource</a></code> is an <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/media.html#htmlvideoelement" id="ref-for-htmlvideoelement①">HTMLVideoElement</a></code> object whose <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/media.html#dom-media-readystate" id="ref-for-dom-media-readystate">readyState</a></code> attribute is either <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/media.html#dom-media-have_nothing" id="ref-for-dom-media-have_nothing">HAVE_NOTHING</a></code> or <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/media.html#dom-media-have_metadata" id="ref-for-dom-media-have_metadata">HAVE_METADATA</a></code> then reject the Promise with a new <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException③">DOMException</a></code> whose name is <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror②">InvalidStateError</a></code>, and abort any further steps.</p>
    <li data-md>
     <p>If the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmapsource" id="ref-for-imagebitmapsource①⓪">ImageBitmapSource</a></code> argument is an <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/canvas.html#htmlcanvaselement" id="ref-for-htmlcanvaselement①">HTMLCanvasElement</a></code> whose bitmap’s <code>origin-clean</code> (<span spec-section="#concept-canvas-origin-clean"></span>) flag is false, then reject the Promise with a new <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException④">DOMException</a></code> whose name is <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#securityerror" id="ref-for-securityerror①">SecurityError</a></code>, and abort any further steps.</p>
   </ul>
   <p>Note that if the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmapsource" id="ref-for-imagebitmapsource①①">ImageBitmapSource</a></code> is an object with either a horizontal dimension or a vertical dimension equal to zero, then the Promise will be simply resolved with an empty sequence of detected objects.</p>
   <h3 class="heading settled" data-level="2.2" id="face-detection-api"><span class="secno">2.2. </span><span class="content">Face Detection API</span><a class="self-link" href="#face-detection-api"></a></h3>
   <p><code class="idl"><a data-link-type="idl" href="#facedetector" id="ref-for-facedetector">FaceDetector</a></code> represents an underlying accelerated platform’s component for detection of human faces in images. It can be created with an optional Dictionary of <code class="idl"><a data-link-type="idl" href="#dictdef-facedetectoroptions" id="ref-for-dictdef-facedetectoroptions">FaceDetectorOptions</a></code>. It provides a single <code class="idl"><a data-link-type="idl" href="#dom-facedetector-detect" id="ref-for-dom-facedetector-detect">detect()</a></code> operation on an <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmapsource" id="ref-for-imagebitmapsource①②">ImageBitmapSource</a></code> which result is a Promise. This method MUST reject this promise in the cases detailed in <a href="#image-sources-for-detection">§ 2.1 Image sources for detection</a>; otherwise it MAY queue a task that utilizes the OS/Platform resources to resolve the Promise with a Sequence of <code class="idl"><a data-link-type="idl" href="#detectedface" id="ref-for-detectedface">DetectedFace</a></code>s, each one essentially consisting on and delimited by a <code class="idl"><a data-link-type="idl" href="#dom-detectedface-boundingbox" id="ref-for-dom-detectedface-boundingbox">boundingBox</a></code>.</p>
   <div class="example" id="example-fc4fedfc"><a class="self-link" href="#example-fc4fedfc"></a> Example implementations of face detection are e.g. <a href="https://developer.android.com/reference/android/media/FaceDetector.html">Android FaceDetector</a> (or the <a href="https://developers.google.com/android/reference/com/google/android/gms/vision/face/Face">Google Play Services vision library</a>), Apple’s <a href="https://developer.apple.com/reference/coreimage/cifacefeature?language=objc">CIFaceFeature</a> / <a href="https://developer.apple.com/documentation/vision/vndetectfacelandmarksrequest?language=objc">VNDetectFaceLandmarksRequest</a> or <a href="https://msdn.microsoft.com/library/windows/apps/windows.media.faceanalysis.facedetector.aspx">Windows 10 FaceDetector</a>. </div>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->),
 <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext"><c- g>SecureContext</c-></a>]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="facedetector"><code><c- g>FaceDetector</c-></code></dfn> {
  <a class="idl-code" data-link-type="constructor" href="#dom-facedetector-facedetector" id="ref-for-dom-facedetector-facedetector"><c- g>constructor</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-facedetectoroptions" id="ref-for-dictdef-facedetectoroptions①"><c- n>FaceDetectorOptions</c-></a> <dfn class="idl-code" data-dfn-for="FaceDetector/FaceDetector(faceDetectorOptions), FaceDetector/constructor(faceDetectorOptions), FaceDetector/FaceDetector(), FaceDetector/constructor()" data-dfn-type="argument" data-export id="dom-facedetector-facedetector-facedetectoroptions-facedetectoroptions"><code><c- g>faceDetectorOptions</c-></code><a class="self-link" href="#dom-facedetector-facedetector-facedetectoroptions-facedetectoroptions"></a></dfn> = {});
  <c- b>Promise</c->&lt;<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#detectedface" id="ref-for-detectedface①"><c- n>DetectedFace</c-></a>>> <a class="idl-code" data-link-type="method" href="#dom-facedetector-detect" id="ref-for-dom-facedetector-detect①"><c- g>detect</c-></a>(<a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmapsource" id="ref-for-imagebitmapsource①③"><c- n>ImageBitmapSource</c-></a> <dfn class="idl-code" data-dfn-for="FaceDetector/detect(image)" data-dfn-type="argument" data-export id="dom-facedetector-detect-image-image"><code><c- g>image</c-></code><a class="self-link" href="#dom-facedetector-detect-image-image"></a></dfn>);
};
</pre>
   <dl class="domintro">
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="FaceDetector" data-dfn-type="constructor" data-export data-lt="FaceDetector(faceDetectorOptions)|constructor(faceDetectorOptions)|FaceDetector()|constructor()" id="dom-facedetector-facedetector"><code>FaceDetector(optional FaceDetectorOptions <var>faceDetectorOptions</var>)</code></dfn>
    <dd>
     Constructs a new <code class="idl"><a data-link-type="idl" href="#facedetector" id="ref-for-facedetector①">FaceDetector</a></code> with the optional <var>faceDetectorOptions</var>. 
     <div class="note" role="note"> Detectors may potentially allocate and hold significant resources. Where possible, reuse the same <code class="idl"><a data-link-type="idl" href="#facedetector" id="ref-for-facedetector②">FaceDetector</a></code> for several detections. </div>
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="FaceDetector" data-dfn-type="method" data-export data-lt="detect(image)" id="dom-facedetector-detect"><code>detect(ImageBitmapSource <var>image</var>)</code></dfn>
    <dd>Tries to detect human faces in the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmapsource" id="ref-for-imagebitmapsource①④">ImageBitmapSource</a></code> <var>image</var>.  The detected faces, if any, are returned as a sequence of <code class="idl"><a data-link-type="idl" href="#detectedface" id="ref-for-detectedface②">DetectedFace</a></code>s.
   </dl>
   <h4 class="heading settled" data-level="2.2.1" id="facedetectoroptions-section"><span class="secno">2.2.1. </span><span class="content"><code class="idl"><a data-link-type="idl" href="#dictdef-facedetectoroptions" id="ref-for-dictdef-facedetectoroptions②">FaceDetectorOptions</a></code></span><a class="self-link" href="#facedetectoroptions-section"></a></h4>
<pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-facedetectoroptions"><code><c- g>FaceDetectorOptions</c-></code></dfn> {
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-short" id="ref-for-idl-unsigned-short"><c- b>unsigned</c-> <c- b>short</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="unsigned short " href="#dom-facedetectoroptions-maxdetectedfaces" id="ref-for-dom-facedetectoroptions-maxdetectedfaces"><c- g>maxDetectedFaces</c-></a>;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="boolean " href="#dom-facedetectoroptions-fastmode" id="ref-for-dom-facedetectoroptions-fastmode"><c- g>fastMode</c-></a>;
};
</pre>
   <dl class="domintro">
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="FaceDetectorOptions" data-dfn-type="dict-member" data-export id="dom-facedetectoroptions-maxdetectedfaces"><code>maxDetectedFaces</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-unsigned-short" id="ref-for-idl-unsigned-short①">unsigned short</a></span>
    <dd>Hint to the UA to try and limit the amount of detected faces on the scene to this maximum number.
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="FaceDetectorOptions" data-dfn-type="dict-member" data-export id="dom-facedetectoroptions-fastmode"><code>fastMode</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①">boolean</a></span>
    <dd>Hint to the UA to try and prioritise speed over accuracy by e.g. operating on a reduced scale or looking for large features.
   </dl>
   <h4 class="heading settled" data-level="2.2.2" id="detectedface-section"><span class="secno">2.2.2. </span><span class="content"><code class="idl"><a data-link-type="idl" href="#detectedface" id="ref-for-detectedface③">DetectedFace</a></code></span><a class="self-link" href="#detectedface-section"></a></h4>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->),
 <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext①"><c- g>SecureContext</c-></a>,
 <a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/structured-data.html#serializable" id="ref-for-serializable"><c- g>Serializable</c-></a>]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="detectedface"><code><c- g>DetectedFace</c-></code></dfn> {
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly"><c- n>DOMRectReadOnly</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMRectReadOnly" href="#dom-detectedface-boundingbox" id="ref-for-dom-detectedface-boundingbox①"><c- g>boundingBox</c-></a>;
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#dictdef-landmark" id="ref-for-dictdef-landmark"><c- n>Landmark</c-></a>>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="FrozenArray<Landmark>?" href="#dom-detectedface-landmarks" id="ref-for-dom-detectedface-landmarks"><c- g>landmarks</c-></a>;
};
</pre>
   <dl class="domintro">
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="DetectedFace" data-dfn-type="attribute" data-export id="dom-detectedface-boundingbox"><code>boundingBox</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly①">DOMRectReadOnly</a>, readonly</span>
    <dd>A rectangle indicating the position and extent of a detected feature aligned to the image axes.
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="DetectedFace" data-dfn-type="attribute" data-export id="dom-detectedface-landmarks"><code>landmarks</code></dfn>, <span> of type FrozenArray&lt;<a data-link-type="idl-name" href="#dictdef-landmark" id="ref-for-dictdef-landmark①">Landmark</a>>, readonly, nullable</span>
    <dd>A series of features of interest related to the detected feature.
   </dl>
<pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-landmark"><code><c- g>Landmark</c-></code></dfn> {
  <c- b>required</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="https://w3c.github.io/mediacapture-image/#Point2D" id="ref-for-Point2D"><c- n>Point2D</c-></a>> <a class="idl-code" data-link-type="dict-member" data-type="FrozenArray<Point2D> " href="#dom-landmark-locations" id="ref-for-dom-landmark-locations"><c- g>locations</c-></a>;
  <a class="n" data-link-type="idl-name" href="#enumdef-landmarktype" id="ref-for-enumdef-landmarktype"><c- n>LandmarkType</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="LandmarkType " href="#dom-landmark-type" id="ref-for-dom-landmark-type"><c- g>type</c-></a>;
};
</pre>
   <dl class="domintro">
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="Landmark" data-dfn-type="dict-member" data-export id="dom-landmark-locations"><code>locations</code></dfn>, <span> of type FrozenArray&lt;<a data-link-type="idl-name" href="https://w3c.github.io/mediacapture-image/#Point2D" id="ref-for-Point2D①">Point2D</a>></span>
    <dd>A point in the center of the detected landmark, or a <a data-link-type="dfn" href="https://heycam.github.io/webidl/#idl-sequence" id="ref-for-idl-sequence">sequence</a> of points defining the vertices of a simple polygon surrounding the landmark in either a clockwise or counter-clockwise direction.
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="Landmark" data-dfn-type="dict-member" data-export id="dom-landmark-type"><code>type</code></dfn>, <span> of type <a data-link-type="idl-name" href="#enumdef-landmarktype" id="ref-for-enumdef-landmarktype①">LandmarkType</a></span>
    <dd>Type of the landmark, if known.
   </dl>
<pre class="idl highlight def"><c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-landmarktype"><code><c- g>LandmarkType</c-></code></dfn> {
  <a class="idl-code" data-link-type="enum-value" href="#dom-landmarktype-mouth" id="ref-for-dom-landmarktype-mouth"><c- s>"mouth"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-landmarktype-eye" id="ref-for-dom-landmarktype-eye"><c- s>"eye"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-landmarktype-nose" id="ref-for-dom-landmarktype-nose"><c- s>"nose"</c-></a>
};
</pre>
   <dl class="domintro">
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="LandmarkType" data-dfn-type="enum-value" data-export data-lt="&quot;mouth&quot;|mouth" id="dom-landmarktype-mouth"><code>mouth</code></dfn>
    <dd>The landmark is identified as a human mouth.
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="LandmarkType" data-dfn-type="enum-value" data-export data-lt="&quot;eye&quot;|eye" id="dom-landmarktype-eye"><code>eye</code></dfn>
    <dd>The landmark is identified as a human eye.
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="LandmarkType" data-dfn-type="enum-value" data-export data-lt="&quot;nose&quot;|nose" id="dom-landmarktype-nose"><code>nose</code></dfn>
    <dd>The landmark is identified as a human nose.
   </dl>
   <div class="note" role="note">
     Consider adding attributes such as, e.g.: 
<pre>[SameObject] readonly attribute unsigned long id;
</pre>
    <p>to <code class="idl"><a data-link-type="idl" href="#detectedface" id="ref-for-detectedface④">DetectedFace</a></code>.</p>
   </div>
   <h3 class="heading settled" data-level="2.3" id="barcode-detection-api"><span class="secno">2.3. </span><span class="content">Barcode Detection API</span><a class="self-link" href="#barcode-detection-api"></a></h3>
   <p><code class="idl"><a data-link-type="idl" href="#barcodedetector" id="ref-for-barcodedetector">BarcodeDetector</a></code> represents an underlying accelerated platform’s component for detection of linear or two-dimensional barcodes in images.  It provides a single <code class="idl"><a data-link-type="idl" href="#dom-barcodedetector-detect" id="ref-for-dom-barcodedetector-detect">detect()</a></code> operation on an <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmapsource" id="ref-for-imagebitmapsource①⑤">ImageBitmapSource</a></code> which result is a Promise.  This method MUST reject this Promise in the cases detailed in <a href="#image-sources-for-detection">§ 2.1 Image sources for detection</a>; otherwise it MAY queue a task using the OS/Platform resources to resolve the Promise with a sequence of <code class="idl"><a data-link-type="idl" href="#detectedbarcode" id="ref-for-detectedbarcode">DetectedBarcode</a></code>s, each one essentially consisting on and delimited by a <code class="idl"><a data-link-type="idl" href="#dom-detectedbarcode-boundingbox" id="ref-for-dom-detectedbarcode-boundingbox">boundingBox</a></code> and a series of <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/mediacapture-image/#Point2D" id="ref-for-Point2D②">Point2D</a></code>s, and possibly a <code class="idl"><a data-link-type="idl" href="#dom-detectedbarcode-rawvalue" id="ref-for-dom-detectedbarcode-rawvalue">rawValue</a></code> decoded <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString">DOMString</a></code>.</p>
   <div class="example" id="example-66867fd7"><a class="self-link" href="#example-66867fd7"></a> Example implementations of Barcode/QR code detection are e.g. <a href="https://developers.google.com/android/reference/com/google/android/gms/vision/barcode/package-summary">Google Play Services</a> or Apple’s <a href="https://developer.apple.com/reference/coreimage/ciqrcodefeature?language=objc">CIQRCodeFeature</a> / <a href="https://developer.apple.com/documentation/vision/vndetectbarcodesrequest?language=objc">VNDetectBarcodesRequest</a>. </div>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->),
 <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext②"><c- g>SecureContext</c-></a>]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="barcodedetector"><code><c- g>BarcodeDetector</c-></code></dfn> {
  <a class="idl-code" data-link-type="constructor" href="#dom-barcodedetector-barcodedetector" id="ref-for-dom-barcodedetector-barcodedetector"><c- g>constructor</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-barcodedetectoroptions" id="ref-for-dictdef-barcodedetectoroptions"><c- n>BarcodeDetectorOptions</c-></a> <dfn class="idl-code" data-dfn-for="BarcodeDetector/BarcodeDetector(barcodeDetectorOptions), BarcodeDetector/constructor(barcodeDetectorOptions), BarcodeDetector/BarcodeDetector(), BarcodeDetector/constructor()" data-dfn-type="argument" data-export id="dom-barcodedetector-barcodedetector-barcodedetectoroptions-barcodedetectoroptions"><code><c- g>barcodeDetectorOptions</c-></code><a class="self-link" href="#dom-barcodedetector-barcodedetector-barcodedetectoroptions-barcodedetectoroptions"></a></dfn> = {});
  <c- b>static</c-> <c- b>Promise</c->&lt;<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#enumdef-barcodeformat" id="ref-for-enumdef-barcodeformat"><c- n>BarcodeFormat</c-></a>>> <a class="idl-code" data-link-type="method" href="#dom-barcodedetector-getsupportedformats" id="ref-for-dom-barcodedetector-getsupportedformats"><c- g>getSupportedFormats</c-></a>();

  <c- b>Promise</c->&lt;<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#detectedbarcode" id="ref-for-detectedbarcode①"><c- n>DetectedBarcode</c-></a>>> <a class="idl-code" data-link-type="method" href="#dom-barcodedetector-detect" id="ref-for-dom-barcodedetector-detect①"><c- g>detect</c-></a>(<a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmapsource" id="ref-for-imagebitmapsource①⑥"><c- n>ImageBitmapSource</c-></a> <dfn class="idl-code" data-dfn-for="BarcodeDetector/detect(image)" data-dfn-type="argument" data-export id="dom-barcodedetector-detect-image-image"><code><c- g>image</c-></code><a class="self-link" href="#dom-barcodedetector-detect-image-image"></a></dfn>);
};
</pre>
   <dl class="domintro">
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="BarcodeDetector" data-dfn-type="constructor" data-export data-lt="BarcodeDetector(barcodeDetectorOptions)|constructor(barcodeDetectorOptions)|BarcodeDetector()|constructor()" id="dom-barcodedetector-barcodedetector"><code>BarcodeDetector(optional BarcodeDetectorOptions <var>barcodeDetectorOptions</var>)</code></dfn>
    <dd>
     Constructs a new <code class="idl"><a data-link-type="idl" href="#barcodedetector" id="ref-for-barcodedetector①">BarcodeDetector</a></code> with <var>barcodeDetectorOptions</var>. 
     <ul>
      <li data-md>
       <p>If <var>barcodeDetectorOptions</var>.<code class="idl"><a data-link-type="idl" href="#dom-barcodedetectoroptions-formats" id="ref-for-dom-barcodedetectoroptions-formats">formats</a></code> is present and empty, then throw a new <code class="idl"><a data-link-type="idl" href="https://tc39.github.io/ecma262/#sec-native-error-types-used-in-this-standard-typeerror" id="ref-for-sec-native-error-types-used-in-this-standard-typeerror">TypeError</a></code>.</p>
      <li data-md>
       <p>If <var>barcodeDetectorOptions</var>.<code class="idl"><a data-link-type="idl" href="#dom-barcodedetectoroptions-formats" id="ref-for-dom-barcodedetectoroptions-formats①">formats</a></code> is present and contains <code class="idl"><a data-link-type="idl" href="#dom-barcodeformat-unknown" id="ref-for-dom-barcodeformat-unknown">unknown</a></code>, then throw a new <code class="idl"><a data-link-type="idl" href="https://tc39.github.io/ecma262/#sec-native-error-types-used-in-this-standard-typeerror" id="ref-for-sec-native-error-types-used-in-this-standard-typeerror①">TypeError</a></code>.</p>
     </ul>
     <div class="note" role="note"> Detectors may potentially allocate and hold significant resources. Where possible, reuse the same <code class="idl"><a data-link-type="idl" href="#barcodedetector" id="ref-for-barcodedetector②">BarcodeDetector</a></code> for several detections. </div>
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="BarcodeDetector" data-dfn-type="method" data-export id="dom-barcodedetector-getsupportedformats"><code>getSupportedFormats()</code></dfn>
    <dd>
     This method, when invoked, MUST return a new <code class="idl"><a data-link-type="idl" href="https://tc39.github.io/ecma262/#sec-promise-objects" id="ref-for-sec-promise-objects">Promise</a></code> <var>promise</var> and run the following steps <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel">in parallel</a>: 
     <ol>
      <li>Let <var>supportedFormats</var> be a new <code class="idl"><a data-link-type="idl" href="https://tc39.github.io/ecma262/#sec-array-objects" id="ref-for-sec-array-objects">Array</a></code>.
      <li>If the UA does not support barcode detection, resolve <var>promise</var> with <var>supportedFormats</var> and abort these steps.
      <li>
       Enumerate the <code class="idl"><a data-link-type="idl" href="#enumdef-barcodeformat" id="ref-for-enumdef-barcodeformat①">BarcodeFormat</a></code>s that the UA understands as potentially detectable in images. Add these to <var>supportedFormats</var>. 
       <div class="note" role="note"> The UA cannot give a definitive answer as to whether a given barcode format will <i>always</i> be recognized on an image due to e.g. positioning of the symbols or encoding errors. If a given barcode symbology is not in <var>supportedFormats</var> array, however, it should not be detectable whatsoever. </div>
      <li>Resolve <var>promise</var> with <var>supportedFormats</var>.
     </ol>
     <div class="note" role="note"> The list of supported <code class="idl"><a data-link-type="idl" href="#enumdef-barcodeformat" id="ref-for-enumdef-barcodeformat②">BarcodeFormat</a></code>s is platform dependent, some examples are the ones supported by <a href="https://developers.google.com/android/reference/com/google/android/gms/vision/barcode/BarcodeDetector.Builder.html#setBarcodeFormats(int)">Google Play Services</a> and <a href="https://developer.apple.com/documentation/coreimage/ciqrcodefeature?preferredLanguage=occ#overview">Apple’s QICRCodeFeature</a>. </div>
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="BarcodeDetector" data-dfn-type="method" data-export data-lt="detect(image)" id="dom-barcodedetector-detect"><code>detect(ImageBitmapSource <var>image</var>)</code></dfn>
    <dd>Tries to detect barcodes in the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmapsource" id="ref-for-imagebitmapsource①⑦">ImageBitmapSource</a></code> <var>image</var>.
   </dl>
   <h4 class="heading settled" data-level="2.3.1" id="barcodedetectoroptions-section"><span class="secno">2.3.1. </span><span class="content"><code class="idl"><a data-link-type="idl" href="#dictdef-barcodedetectoroptions" id="ref-for-dictdef-barcodedetectoroptions①">BarcodeDetectorOptions</a></code></span><a class="self-link" href="#barcodedetectoroptions-section"></a></h4>
<pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-barcodedetectoroptions"><code><c- g>BarcodeDetectorOptions</c-></code></dfn> {
  <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#enumdef-barcodeformat" id="ref-for-enumdef-barcodeformat③"><c- n>BarcodeFormat</c-></a>> <a class="idl-code" data-link-type="dict-member" data-type="sequence<BarcodeFormat> " href="#dom-barcodedetectoroptions-formats" id="ref-for-dom-barcodedetectoroptions-formats②"><c- g>formats</c-></a>;
};
</pre>
   <dl class="domintro">
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="BarcodeDetectorOptions" data-dfn-type="dict-member" data-export id="dom-barcodedetectoroptions-formats"><code>formats</code></dfn>, <span> of type sequence&lt;<a data-link-type="idl-name" href="#enumdef-barcodeformat" id="ref-for-enumdef-barcodeformat④">BarcodeFormat</a>></span>
    <dd>
     A series of <code class="idl"><a data-link-type="idl" href="#enumdef-barcodeformat" id="ref-for-enumdef-barcodeformat⑤">BarcodeFormat</a></code>s to search for in the subsequent <code class="idl"><a data-link-type="idl" href="#dom-barcodedetector-detect" id="ref-for-dom-barcodedetector-detect②">detect()</a></code> calls. If not present then the UA SHOULD search for all supported formats. 
     <div class="note" role="note"> Limiting the search to a particular subset of supported formats is likely to provide better performance. </div>
   </dl>
   <h4 class="heading settled" data-level="2.3.2" id="detectedbarcode-section"><span class="secno">2.3.2. </span><span class="content"><code class="idl"><a data-link-type="idl" href="#detectedbarcode" id="ref-for-detectedbarcode②">DetectedBarcode</a></code></span><a class="self-link" href="#detectedbarcode-section"></a></h4>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed③"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->),
 <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext③"><c- g>SecureContext</c-></a>,
 <a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/structured-data.html#serializable" id="ref-for-serializable①"><c- g>Serializable</c-></a>]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="detectedbarcode"><code><c- g>DetectedBarcode</c-></code></dfn> {
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject②"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly②"><c- n>DOMRectReadOnly</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMRectReadOnly" href="#dom-detectedbarcode-boundingbox" id="ref-for-dom-detectedbarcode-boundingbox①"><c- g>boundingBox</c-></a>;
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject③"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-detectedbarcode-rawvalue" id="ref-for-dom-detectedbarcode-rawvalue①"><c- g>rawValue</c-></a>;
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject④"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-barcodeformat" id="ref-for-enumdef-barcodeformat⑥"><c- n>BarcodeFormat</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="BarcodeFormat" href="#dom-detectedbarcode-format" id="ref-for-dom-detectedbarcode-format"><c- g>format</c-></a>;
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject⑤"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="https://w3c.github.io/mediacapture-image/#Point2D" id="ref-for-Point2D③"><c- n>Point2D</c-></a>> <a class="idl-code" data-link-type="attribute" data-readonly data-type="FrozenArray<Point2D>" href="#dom-detectedbarcode-cornerpoints" id="ref-for-dom-detectedbarcode-cornerpoints"><c- g>cornerPoints</c-></a>;
};
</pre>
   <dl class="domintro">
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="DetectedBarcode" data-dfn-type="attribute" data-export id="dom-detectedbarcode-boundingbox"><code>boundingBox</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly③">DOMRectReadOnly</a>, readonly</span>
    <dd>A rectangle indicating the position and extent of a detected feature aligned to the image
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="DetectedBarcode" data-dfn-type="attribute" data-export id="dom-detectedbarcode-rawvalue"><code>rawValue</code></dfn>, <span> of type <a data-link-type="idl-name" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②">DOMString</a>, readonly</span>
    <dd>String decoded from the barcode. This value might be multiline.
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="DetectedBarcode" data-dfn-type="attribute" data-export id="dom-detectedbarcode-format"><code>format</code></dfn>, <span> of type <a data-link-type="idl-name" href="#enumdef-barcodeformat" id="ref-for-enumdef-barcodeformat⑦">BarcodeFormat</a>, readonly</span>
    <dd>Detect <code class="idl"><a data-link-type="idl" href="#enumdef-barcodeformat" id="ref-for-enumdef-barcodeformat⑧">BarcodeFormat</a></code>.
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="DetectedBarcode" data-dfn-type="attribute" data-export id="dom-detectedbarcode-cornerpoints"><code>cornerPoints</code></dfn>, <span> of type FrozenArray&lt;<a data-link-type="idl-name" href="https://w3c.github.io/mediacapture-image/#Point2D" id="ref-for-Point2D④">Point2D</a>>, readonly</span>
    <dd>A <a data-link-type="dfn" href="https://heycam.github.io/webidl/#idl-sequence" id="ref-for-idl-sequence①">sequence</a> of corner points of the detected barcode, in clockwise direction and  starting with top-left. This is not necessarily a square due to possible perspective distortions.
   </dl>
   <h4 class="heading settled" data-level="2.3.3" id="barcodeformat-section"><span class="secno">2.3.3. </span><span class="content"><code class="idl"><a data-link-type="idl" href="#enumdef-barcodeformat" id="ref-for-enumdef-barcodeformat⑨">BarcodeFormat</a></code></span><a class="self-link" href="#barcodeformat-section"></a></h4>
<pre class="idl highlight def"><c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-barcodeformat"><code><c- g>BarcodeFormat</c-></code></dfn> {
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-aztec" id="ref-for-dom-barcodeformat-aztec"><c- s>"aztec"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-code_128" id="ref-for-dom-barcodeformat-code_128"><c- s>"code_128"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-code_39" id="ref-for-dom-barcodeformat-code_39"><c- s>"code_39"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-code_93" id="ref-for-dom-barcodeformat-code_93"><c- s>"code_93"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-codabar" id="ref-for-dom-barcodeformat-codabar"><c- s>"codabar"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-data_matrix" id="ref-for-dom-barcodeformat-data_matrix"><c- s>"data_matrix"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-ean_13" id="ref-for-dom-barcodeformat-ean_13"><c- s>"ean_13"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-ean_8" id="ref-for-dom-barcodeformat-ean_8"><c- s>"ean_8"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-itf" id="ref-for-dom-barcodeformat-itf"><c- s>"itf"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-pdf417" id="ref-for-dom-barcodeformat-pdf417"><c- s>"pdf417"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-qr_code" id="ref-for-dom-barcodeformat-qr_code"><c- s>"qr_code"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-unknown" id="ref-for-dom-barcodeformat-unknown①"><c- s>"unknown"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-upc_a" id="ref-for-dom-barcodeformat-upc_a"><c- s>"upc_a"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-upc_e" id="ref-for-dom-barcodeformat-upc_e"><c- s>"upc_e"</c-></a>
};
</pre>
   <dl class="domintro">
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="BarcodeFormat" data-dfn-type="enum-value" data-export data-lt="&quot;aztec&quot;|aztec" id="dom-barcodeformat-aztec"><code>aztec</code></dfn>
    <dd>This entry represents a square two-dimensional matrix following <a data-link-type="biblio" href="#biblio-iso24778">[iso24778]</a> and with a square bullseye pattern at their centre, thus resembling an Aztec pyramid. Does not require a surrounding blank zone. 
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="BarcodeFormat" data-dfn-type="enum-value" data-export data-lt="&quot;code_128&quot;|code_128" id="dom-barcodeformat-code_128"><code>code_128</code></dfn>
    <dd><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="code-128">Code 128</dfn> is a linear (one-dimensional), bidirectionally-decodable, self-checking barcode following <a data-link-type="biblio" href="#biblio-iso15417">[iso15417]</a> and able to encode all 128 characters of ASCII (hence the naming). 
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="BarcodeFormat" data-dfn-type="enum-value" data-export data-lt="&quot;code_39&quot;|code_39" id="dom-barcodeformat-code_39"><code>code_39</code></dfn>
    <dd>This part talks about the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="code-39">Code 39</dfn> barcode. It is a discrete and variable-length barcode type. <a data-link-type="biblio" href="#biblio-iso16388">[iso16388]</a> 
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="BarcodeFormat" data-dfn-type="enum-value" data-export data-lt="&quot;code_93&quot;|code_93" id="dom-barcodeformat-code_93"><code>code_93</code></dfn>
    <dd> Code 93 is a linear, continuous symbology with a variable length following <a data-link-type="biblio" href="#biblio-bc5">[bc5]</a>. It offers a larger information density than <a data-link-type="dfn" href="#code-128" id="ref-for-code-128">Code 128</a> and the visually similar <a data-link-type="dfn" href="#code-39" id="ref-for-code-39">Code 39</a>. Code 93 is used primarily by Canada Post to encode supplementary delivery information.
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="BarcodeFormat" data-dfn-type="enum-value" data-export data-lt="&quot;codabar&quot;|codabar" id="dom-barcodeformat-codabar"><code>codabar</code></dfn>
    <dd>Codabar is a linear barcode symbology developed in 1972 by Pitney Bowes Corp. ( 
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="BarcodeFormat" data-dfn-type="enum-value" data-export data-lt="&quot;data_matrix&quot;|data_matrix" id="dom-barcodeformat-data_matrix"><code>data_matrix</code></dfn>
    <dd> Data Matrix is an orientation-independent two-dimensional barcode composed of black and white modules arranged in either a square or rectangular pattern following <a data-link-type="biblio" href="#biblio-iso16022">[iso16022]</a>.
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="BarcodeFormat" data-dfn-type="enum-value" data-export data-lt="&quot;ean_13&quot;|ean_13" id="dom-barcodeformat-ean_13"><code>ean_13</code></dfn>
    <dd><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="ean-13">EAN-13</dfn> is a linear barcode based on the <a data-link-type="dfn" href="#upc-a" id="ref-for-upc-a">UPC-A</a> standard and defined in <a data-link-type="biblio" href="#biblio-iso15420">[iso15420]</a>. It was originally developed by the International Article Numbering Association (EAN) in Europe as a superset of the original 12-digit Universal Product Code (UPC) system developed in the United States (<a data-link-type="dfn" href="#upc-a" id="ref-for-upc-a①">UPC-A</a> codes are represented in EAN-13 with the first character set to <var>0</var>).
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="BarcodeFormat" data-dfn-type="enum-value" data-export data-lt="&quot;ean_8&quot;|ean_8" id="dom-barcodeformat-ean_8"><code>ean_8</code></dfn>
    <dd>EAN-8 is a linear barcode defined in <a data-link-type="biblio" href="#biblio-iso15420">[iso15420]</a> and derived from <a data-link-type="dfn" href="#ean-13" id="ref-for-ean-13">EAN-13</a>.
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="BarcodeFormat" data-dfn-type="enum-value" data-export data-lt="&quot;itf&quot;|itf" id="dom-barcodeformat-itf"><code>itf</code></dfn>
    <dd>ITF14 barcode is the GS1 implementation of an Interleaved 2 of 5 bar code to encode a Global Trade Item  Number. It is continuous, self-checking, bidirectionally decodable and it will always encode 14 digits.
  was once used in the package delivery industry but replaced by <a data-link-type="dfn" href="#code-128" id="ref-for-code-128①">Code 128</a>. <a data-link-type="biblio" href="#biblio-bc2">[bc2]</a> 
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="BarcodeFormat" data-dfn-type="enum-value" data-export data-lt="&quot;pdf417&quot;|pdf417" id="dom-barcodeformat-pdf417"><code>pdf417</code></dfn>
    <dd>PDF417 refers to a continuous two-dimensional barcode symbology format with multiple rows and columns, bi-directionally decodable and according to the Standard <a data-link-type="biblio" href="#biblio-iso15438">[iso15438]</a>.
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="BarcodeFormat" data-dfn-type="enum-value" data-export data-lt="&quot;qr_code&quot;|qr_code" id="dom-barcodeformat-qr_code"><code>qr_code</code></dfn>
    <dd>QR Code is a two-dimensional barcode respecting the Standard <a data-link-type="biblio" href="#biblio-iso18004">[iso18004]</a>. The information encoded can be text, URL or other data.
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="BarcodeFormat" data-dfn-type="enum-value" data-export data-lt="&quot;unknown&quot;|unknown" id="dom-barcodeformat-unknown"><code>unknown</code></dfn>
    <dd>This value is used by the platform to signify that it does not know or specify which barcode format is being detected or supported.
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="BarcodeFormat" data-dfn-type="enum-value" data-export data-lt="&quot;upc_a&quot;|upc_a" id="dom-barcodeformat-upc_a"><code>upc_a</code></dfn>
    <dd><dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="upc-a">UPC-A</dfn> is one of the most common linear barcode types and is widely applied to retail in the United States.  Define in <a data-link-type="biblio" href="#biblio-iso15420">[iso15420]</a>, it represents digits by strips of bars and spaces, each digit being associated to a unique pattern of 2 bars and 2 spaces, both of variable width.  UPC-A can encode 12 digits that are uniquely assigned to each trade item, and it’ss technically a subset of <a data-link-type="dfn" href="#ean-13" id="ref-for-ean-13①">EAN-13</a> (UPC-A codes are represented in <a data-link-type="dfn" href="#ean-13" id="ref-for-ean-13②">EAN-13</a> with the first character set to <var>0</var>). 
    <dt><dfn class="dfn-paneled idl-code" data-dfn-for="BarcodeFormat" data-dfn-type="enum-value" data-export data-lt="&quot;upc_e&quot;|upc_e" id="dom-barcodeformat-upc_e"><code>upc_e</code></dfn>
    <dd>UPC-E Barcode is a variation of <a data-link-type="dfn" href="#upc-a" id="ref-for-upc-a②">UPC-A</a> defined in <a data-link-type="biblio" href="#biblio-iso15420">[iso15420]</a>, compressing out unnecessary zeros for a more compact barcode.
   </dl>
   <h2 class="heading settled" data-level="3" id="security-and-privacy-considerations"><span class="secno">3. </span><span class="content">Security and Privacy Considerations</span><a class="self-link" href="#security-and-privacy-considerations"></a></h2>
   <p><em>This section is non-normative.</em></p>
   <p>This interface reveals information about the contents of an image source. It is
critical for implementations to ensure that it cannot be used to bypass
protections that would otherwise protect an image source from inspection. <a href="#image-sources-for-detection">§ 2.1 Image sources for detection</a> describes the algorithm to accomplish this.</p>
   <p>By providing high-performance shape detection capabilities this interface allows
developers to run image analysis tasks on the local device. This offers a
privacy advantage over offloading computation to a remote system. Developers
should consider the results returned by this interface as privacy sensitive as
the original image from which they were derived.</p>
   <h2 class="heading settled" data-level="4" id="examples"><span class="secno">4. </span><span class="content">Examples</span><a class="self-link" href="#examples"></a></h2>
   <p><i>This section is non-normative.</i></p>
   <p class="note" role="note"> Slightly modified/extended versions of these examples (and more) can be found in
 e.g. <a href="https://codepen.io/collection/DwWVJj/">this codepen collection</a>. </p>
   <h3 class="heading settled" data-level="4.1" id="example-feature-detection"><span class="secno">4.1. </span><span class="content">Platform support for a given detector</span><a class="self-link" href="#example-feature-detection"></a></h3>
   <div class="note" role="note"> The following example can also be found in e.g. <a href="https://codepen.io/miguelao/pen/PbYpMv?editors=0010">this codepen</a> with minimal modifications. </div>
   <div class="example" id="example-a40716b1">
    <a class="self-link" href="#example-a40716b1"></a> 
<pre class="language-js highlight"><c- k>if</c-> <c- p>(</c->window<c- p>.</c->FaceDetector <c- o>==</c-> <c- kc>undefined</c-><c- p>)</c-> <c- p>{</c->
  console<c- p>.</c->error<c- p>(</c-><c- t>'Face Detection not supported on this platform'</c-><c- p>);</c->
<c- p>}</c->
<c- k>if</c-> <c- p>(</c->window<c- p>.</c->BarcodeDetector <c- o>==</c-> <c- kc>undefined</c-><c- p>)</c-> <c- p>{</c->
  console<c- p>.</c->error<c- p>(</c-><c- t>'Barcode Detection not supported on this platform'</c-><c- p>);</c->
<c- p>}</c->
</pre>
   </div>
   <h3 class="heading settled" data-level="4.2" id="example-face-detection"><span class="secno">4.2. </span><span class="content">Face Detection</span><a class="self-link" href="#example-face-detection"></a></h3>
   <div class="note" role="note"> The following example can also be found in e.g. <a href="https://codepen.io/miguelao/pen/ORYbbm?editors=0010">this codepen</a> (or <a href="https://codepen.io/miguelao/pen/PmJWro">this one</a>, with landmarks overlay). </div>
   <div class="example" id="example-6cd773af">
    <a class="self-link" href="#example-6cd773af"></a> 
<pre class="language-js highlight"><c- a>let</c-> faceDetector <c- o>=</c-> <c- k>new</c-> FaceDetector<c- p>({</c->fastMode<c- o>:</c-> <c- kc>true</c-><c- p>,</c-> maxDetectedFaces<c- o>:</c-> <c- mi>1</c-><c- p>});</c->
<c- c1>// Assuming |theImage| is e.g. a &amp;lt;img> content, or a Blob.</c->

faceDetector<c- p>.</c->detect<c- p>(</c->theImage<c- p>)</c->
<c- p>.</c->then<c- p>(</c->detectedFaces <c- p>=></c-> <c- p>{</c->
  <c- k>for</c-> <c- p>(</c-><c- kr>const</c-> face <c- k>of</c-> detectedFaces<c- p>)</c-> <c- p>{</c->
    console<c- p>.</c->log<c- p>(</c->
        <c- t>' Face @ (${face.boundingBox.x}, ${face.boundingBox.y}),'</c-> <c- o>+</c->
        <c- t>' size ${face.boundingBox.width}x${face.boundingBox.height}'</c-><c- p>);</c->
  <c- p>}</c->
<c- p>}).</c-><c- k>catch</c-><c- p>(()</c-> <c- p>=></c-> <c- p>{</c->
  console<c- p>.</c->error<c- p>(</c-><c- u>"Face Detection failed, boo."</c-><c- p>);</c->
<c- p>})</c->
</pre>
   </div>
   <h3 class="heading settled" data-level="4.3" id="example-barcode-detection"><span class="secno">4.3. </span><span class="content">Barcode Detection</span><a class="self-link" href="#example-barcode-detection"></a></h3>
   <div class="note" role="note"> The following example can also be found in e.g. <a href="https://codepen.io/miguelao/pen/wgrYjZ?editors=0010">this codepen</a>. </div>
   <div class="example" id="example-da90c518">
    <a class="self-link" href="#example-da90c518"></a> 
<pre class="language-js highlight"><c- a>let</c-> barcodeDetector <c- o>=</c-> <c- k>new</c-> BarcodeDetector<c- p>();</c->
<c- c1>// Assuming |theImage| is e.g. a &amp;lt;img> content, or a Blob.</c->

barcodeDetector<c- p>.</c->detect<c- p>(</c->theImage<c- p>)</c->
<c- p>.</c->then<c- p>(</c->detectedCodes <c- p>=></c-> <c- p>{</c->
  <c- k>for</c-> <c- p>(</c-><c- kr>const</c-> barcode <c- k>of</c-> detectedCodes<c- p>)</c-> <c- p>{</c->
    console<c- p>.</c->log<c- p>(</c-><c- t>' Barcode ${barcode.rawValue}'</c-> <c- o>+</c->
        <c- t>' @ (${barcode.boundingBox.x}, ${barcode.boundingBox.y}) with size'</c-> <c- o>+</c->
        <c- t>' ${barcode.boundingBox.width}x${barcode.boundingBox.height}'</c-><c- p>);</c->
  <c- p>}</c->
<c- p>}).</c-><c- k>catch</c-><c- p>(()</c-> <c- p>=></c-> <c- p>{</c->
  console<c- p>.</c->error<c- p>(</c-><c- u>"Barcode Detection failed, boo."</c-><c- p>);</c->
<c- p>})</c->
</pre>
   </div>
  </main>
  <div data-fill-with="conformance">
   <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
   <p> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology.
            The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL”
            in the normative parts of this document
            are to be interpreted as described in RFC 2119.
            However, for readability,
            these words do not appear in all uppercase letters in this specification. </p>
   <p> All of the text of this specification is normative
            except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
   <p> Examples in this specification are introduced with the words “for example”
            or are set apart from the normative text with <code>class="example"</code>, like this: </p>
   <div class="example" id="example-example"><a class="self-link" href="#example-example"></a> This is an example of an informative example. </div>
   <p> Informative notes begin with the word “Note”
            and are set apart from the normative text with <code>class="note"</code>, like this: </p>
   <p class="note" role="note"> Note, this is an informative note. </p>
  </div>
<script>
(function() {
  "use strict";
  var collapseSidebarText = '<span aria-hidden="true">←</span> '
                          + '<span>Collapse Sidebar</span>';
  var expandSidebarText   = '<span aria-hidden="true">→</span> '
                          + '<span>Pop Out Sidebar</span>';
  var tocJumpText         = '<span aria-hidden="true">↑</span> '
                          + '<span>Jump to Table of Contents</span>';

  var sidebarMedia = window.matchMedia('screen and (min-width: 78em)');
  var autoToggle   = function(e){ toggleSidebar(e.matches) };
  if(sidebarMedia.addListener) {
    sidebarMedia.addListener(autoToggle);
  }

  function toggleSidebar(on) {
    if (on == undefined) {
      on = !document.body.classList.contains('toc-sidebar');
    }

    /* Don’t scroll to compensate for the ToC if we’re above it already. */
    var headY = 0;
    var head = document.querySelector('.head');
    if (head) {
      // terrible approx of "top of ToC"
      headY += head.offsetTop + head.offsetHeight;
    }
    var skipScroll = window.scrollY < headY;

    var toggle = document.getElementById('toc-toggle');
    var tocNav = document.getElementById('toc');
    if (on) {
      var tocHeight = tocNav.offsetHeight;
      document.body.classList.add('toc-sidebar');
      document.body.classList.remove('toc-inline');
      toggle.innerHTML = collapseSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, 0 - tocHeight);
      }
      tocNav.focus();
      sidebarMedia.addListener(autoToggle); // auto-collapse when out of room
    }
    else {
      document.body.classList.add('toc-inline');
      document.body.classList.remove('toc-sidebar');
      toggle.innerHTML = expandSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, tocNav.offsetHeight);
      }
      if (toggle.matches(':hover')) {
        /* Unfocus button when not using keyboard navigation,
           because I don’t know where else to send the focus. */
        toggle.blur();
      }
    }
  }

  function createSidebarToggle() {
    /* Create the sidebar toggle in JS; it shouldn’t exist when JS is off. */
    var toggle = document.createElement('a');
      /* This should probably be a button, but appearance isn’t standards-track.*/
    toggle.id = 'toc-toggle';
    toggle.class = 'toc-toggle';
    toggle.href = '#toc';
    toggle.innerHTML = collapseSidebarText;

    sidebarMedia.addListener(autoToggle);
    var toggler = function(e) {
      e.preventDefault();
      sidebarMedia.removeListener(autoToggle); // persist explicit off states
      toggleSidebar();
      return false;
    }
    toggle.addEventListener('click', toggler, false);


    /* Get <nav id=toc-nav>, or make it if we don’t have one. */
    var tocNav = document.getElementById('toc-nav');
    if (!tocNav) {
      tocNav = document.createElement('p');
      tocNav.id = 'toc-nav';
      /* Prepend for better keyboard navigation */
      document.body.insertBefore(tocNav, document.body.firstChild);
    }
    /* While we’re at it, make sure we have a Jump to Toc link. */
    var tocJump = document.getElementById('toc-jump');
    if (!tocJump) {
      tocJump = document.createElement('a');
      tocJump.id = 'toc-jump';
      tocJump.href = '#toc';
      tocJump.innerHTML = tocJumpText;
      tocNav.appendChild(tocJump);
    }

    tocNav.appendChild(toggle);
  }

  var toc = document.getElementById('toc');
  if (toc) {
    createSidebarToggle();
    toggleSidebar(sidebarMedia.matches);

    /* If the sidebar has been manually opened and is currently overlaying the text
       (window too small for the MQ to add the margin to body),
       then auto-close the sidebar once you click on something in there. */
    toc.addEventListener('click', function(e) {
      if(e.target.tagName.toLowerCase() == "a" && document.body.classList.contains('toc-sidebar') && !sidebarMedia.matches) {
        toggleSidebar(false);
      }
    }, false);
  }
  else {
    console.warn("Can’t find Table of Contents. Please use <nav id='toc'> around the ToC.");
  }

  /* Wrap tables in case they overflow */
  var tables = document.querySelectorAll(':not(.overlarge) > table.data, :not(.overlarge) > table.index');
  var numTables = tables.length;
  for (var i = 0; i < numTables; i++) {
    var table = tables[i];
    var wrapper = document.createElement('div');
    wrapper.className = 'overlarge';
    table.parentNode.insertBefore(wrapper, table);
    wrapper.appendChild(table);
  }

})();
</script>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#dom-barcodeformat-aztec">aztec</a><span>, in §2.3.3</span>
   <li><a href="#dom-barcodeformat-aztec">"aztec"</a><span>, in §2.3.3</span>
   <li><a href="#barcodedetector">BarcodeDetector</a><span>, in §2.3</span>
   <li><a href="#dom-barcodedetector-barcodedetector">BarcodeDetector()</a><span>, in §2.3</span>
   <li><a href="#dom-barcodedetector-barcodedetector">BarcodeDetector(barcodeDetectorOptions)</a><span>, in §2.3</span>
   <li><a href="#dictdef-barcodedetectoroptions">BarcodeDetectorOptions</a><span>, in §2.3.1</span>
   <li><a href="#enumdef-barcodeformat">BarcodeFormat</a><span>, in §2.3.3</span>
   <li>
    boundingBox
    <ul>
     <li><a href="#dom-detectedbarcode-boundingbox">attribute for DetectedBarcode</a><span>, in §2.3.2</span>
     <li><a href="#dom-detectedface-boundingbox">attribute for DetectedFace</a><span>, in §2.2.2</span>
    </ul>
   <li><a href="#dom-barcodeformat-codabar">"codabar"</a><span>, in §2.3.3</span>
   <li><a href="#dom-barcodeformat-codabar">codabar</a><span>, in §2.3.3</span>
   <li><a href="#dom-barcodeformat-code_128">code_128</a><span>, in §2.3.3</span>
   <li><a href="#dom-barcodeformat-code_128">"code_128"</a><span>, in §2.3.3</span>
   <li><a href="#code-128">Code 128</a><span>, in §2.3.3</span>
   <li><a href="#dom-barcodeformat-code_39">"code_39"</a><span>, in §2.3.3</span>
   <li><a href="#code-39">Code 39</a><span>, in §2.3.3</span>
   <li><a href="#dom-barcodeformat-code_39">code_39</a><span>, in §2.3.3</span>
   <li><a href="#dom-barcodeformat-code_93">"code_93"</a><span>, in §2.3.3</span>
   <li><a href="#dom-barcodeformat-code_93">code_93</a><span>, in §2.3.3</span>
   <li>
    constructor()
    <ul>
     <li><a href="#dom-barcodedetector-barcodedetector">constructor for BarcodeDetector</a><span>, in §2.3</span>
     <li><a href="#dom-facedetector-facedetector">constructor for FaceDetector</a><span>, in §2.2</span>
    </ul>
   <li><a href="#dom-barcodedetector-barcodedetector">constructor(barcodeDetectorOptions)</a><span>, in §2.3</span>
   <li><a href="#dom-facedetector-facedetector">constructor(faceDetectorOptions)</a><span>, in §2.2</span>
   <li><a href="#dom-detectedbarcode-cornerpoints">cornerPoints</a><span>, in §2.3.2</span>
   <li><a href="#dom-barcodeformat-data_matrix">"data_matrix"</a><span>, in §2.3.3</span>
   <li><a href="#dom-barcodeformat-data_matrix">data_matrix</a><span>, in §2.3.3</span>
   <li><a href="#detectedbarcode">DetectedBarcode</a><span>, in §2.3.2</span>
   <li><a href="#detectedface">DetectedFace</a><span>, in §2.2.2</span>
   <li>
    detect(image)
    <ul>
     <li><a href="#dom-barcodedetector-detect">method for BarcodeDetector</a><span>, in §2.3</span>
     <li><a href="#dom-facedetector-detect">method for FaceDetector</a><span>, in §2.2</span>
    </ul>
   <li><a href="#dom-barcodeformat-ean_13">"ean_13"</a><span>, in §2.3.3</span>
   <li><a href="#dom-barcodeformat-ean_13">ean_13</a><span>, in §2.3.3</span>
   <li><a href="#ean-13">EAN-13</a><span>, in §2.3.3</span>
   <li><a href="#dom-barcodeformat-ean_8">ean_8</a><span>, in §2.3.3</span>
   <li><a href="#dom-barcodeformat-ean_8">"ean_8"</a><span>, in §2.3.3</span>
   <li><a href="#dom-landmarktype-eye">eye</a><span>, in §2.2.2</span>
   <li><a href="#dom-landmarktype-eye">"eye"</a><span>, in §2.2.2</span>
   <li><a href="#dom-facedetector-facedetector">FaceDetector()</a><span>, in §2.2</span>
   <li><a href="#facedetector">FaceDetector</a><span>, in §2.2</span>
   <li><a href="#dom-facedetector-facedetector">FaceDetector(faceDetectorOptions)</a><span>, in §2.2</span>
   <li><a href="#dictdef-facedetectoroptions">FaceDetectorOptions</a><span>, in §2.2.1</span>
   <li><a href="#dom-facedetectoroptions-fastmode">fastMode</a><span>, in §2.2.1</span>
   <li><a href="#dom-detectedbarcode-format">format</a><span>, in §2.3.2</span>
   <li><a href="#dom-barcodedetectoroptions-formats">formats</a><span>, in §2.3.1</span>
   <li><a href="#dom-barcodedetector-getsupportedformats">getSupportedFormats()</a><span>, in §2.3</span>
   <li><a href="#dom-barcodeformat-itf">itf</a><span>, in §2.3.3</span>
   <li><a href="#dom-barcodeformat-itf">"itf"</a><span>, in §2.3.3</span>
   <li><a href="#dictdef-landmark">Landmark</a><span>, in §2.2.2</span>
   <li><a href="#dom-detectedface-landmarks">landmarks</a><span>, in §2.2.2</span>
   <li><a href="#enumdef-landmarktype">LandmarkType</a><span>, in §2.2.2</span>
   <li><a href="#dom-landmark-locations">locations</a><span>, in §2.2.2</span>
   <li><a href="#dom-facedetectoroptions-maxdetectedfaces">maxDetectedFaces</a><span>, in §2.2.1</span>
   <li><a href="#dom-landmarktype-mouth">"mouth"</a><span>, in §2.2.2</span>
   <li><a href="#dom-landmarktype-mouth">mouth</a><span>, in §2.2.2</span>
   <li><a href="#dom-landmarktype-nose">"nose"</a><span>, in §2.2.2</span>
   <li><a href="#dom-landmarktype-nose">nose</a><span>, in §2.2.2</span>
   <li><a href="#dom-barcodeformat-pdf417">"pdf417"</a><span>, in §2.3.3</span>
   <li><a href="#dom-barcodeformat-pdf417">pdf417</a><span>, in §2.3.3</span>
   <li><a href="#dom-barcodeformat-qr_code">"qr_code"</a><span>, in §2.3.3</span>
   <li><a href="#dom-barcodeformat-qr_code">qr_code</a><span>, in §2.3.3</span>
   <li><a href="#dom-detectedbarcode-rawvalue">rawValue</a><span>, in §2.3.2</span>
   <li><a href="#dom-landmark-type">type</a><span>, in §2.2.2</span>
   <li><a href="#dom-barcodeformat-unknown">unknown</a><span>, in §2.3.3</span>
   <li><a href="#dom-barcodeformat-unknown">"unknown"</a><span>, in §2.3.3</span>
   <li><a href="#dom-barcodeformat-upc_a">upc_a</a><span>, in §2.3.3</span>
   <li><a href="#upc-a">UPC-A</a><span>, in §2.3.3</span>
   <li><a href="#dom-barcodeformat-upc_a">"upc_a"</a><span>, in §2.3.3</span>
   <li><a href="#dom-barcodeformat-upc_e">upc_e</a><span>, in §2.3.3</span>
   <li><a href="#dom-barcodeformat-upc_e">"upc_e"</a><span>, in §2.3.3</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-sec-array-objects">
   <a href="https://tc39.github.io/ecma262/#sec-array-objects">https://tc39.github.io/ecma262/#sec-array-objects</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-array-objects">2.3. Barcode Detection API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-promise-objects">
   <a href="https://tc39.github.io/ecma262/#sec-promise-objects">https://tc39.github.io/ecma262/#sec-promise-objects</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-promise-objects">2.3. Barcode Detection API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-native-error-types-used-in-this-standard-typeerror">
   <a href="https://tc39.github.io/ecma262/#sec-native-error-types-used-in-this-standard-typeerror">https://tc39.github.io/ecma262/#sec-native-error-types-used-in-this-standard-typeerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-native-error-types-used-in-this-standard-typeerror">2.3. Barcode Detection API</a> <a href="#ref-for-sec-native-error-types-used-in-this-standard-typeerror①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-domrectreadonly">
   <a href="https://drafts.fxtf.org/geometry-1/#domrectreadonly">https://drafts.fxtf.org/geometry-1/#domrectreadonly</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-domrectreadonly">2.2.2. DetectedFace</a> <a href="#ref-for-domrectreadonly①">(2)</a>
    <li><a href="#ref-for-domrectreadonly②">2.3.2. DetectedBarcode</a> <a href="#ref-for-domrectreadonly③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-media-have_metadata">
   <a href="https://html.spec.whatwg.org/multipage/media.html#dom-media-have_metadata">https://html.spec.whatwg.org/multipage/media.html#dom-media-have_metadata</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-media-have_metadata">2.1. Image sources for detection</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-media-have_nothing">
   <a href="https://html.spec.whatwg.org/multipage/media.html#dom-media-have_nothing">https://html.spec.whatwg.org/multipage/media.html#dom-media-have_nothing</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-media-have_nothing">2.1. Image sources for detection</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-htmlcanvaselement">
   <a href="https://html.spec.whatwg.org/multipage/canvas.html#htmlcanvaselement">https://html.spec.whatwg.org/multipage/canvas.html#htmlcanvaselement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-htmlcanvaselement">2.1. Image sources for detection</a> <a href="#ref-for-htmlcanvaselement①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-htmlimageelement">
   <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#htmlimageelement">https://html.spec.whatwg.org/multipage/embedded-content.html#htmlimageelement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-htmlimageelement">2.1. Image sources for detection</a> <a href="#ref-for-htmlimageelement①">(2)</a> <a href="#ref-for-htmlimageelement②">(3)</a> <a href="#ref-for-htmlimageelement③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-htmlvideoelement">
   <a href="https://html.spec.whatwg.org/multipage/media.html#htmlvideoelement">https://html.spec.whatwg.org/multipage/media.html#htmlvideoelement</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-htmlvideoelement">2.1. Image sources for detection</a> <a href="#ref-for-htmlvideoelement①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-imagebitmapsource">
   <a href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmapsource">https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmapsource</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-imagebitmapsource">2.1. Image sources for detection</a> <a href="#ref-for-imagebitmapsource①">(2)</a> <a href="#ref-for-imagebitmapsource②">(3)</a> <a href="#ref-for-imagebitmapsource③">(4)</a> <a href="#ref-for-imagebitmapsource④">(5)</a> <a href="#ref-for-imagebitmapsource⑤">(6)</a> <a href="#ref-for-imagebitmapsource⑥">(7)</a> <a href="#ref-for-imagebitmapsource⑦">(8)</a> <a href="#ref-for-imagebitmapsource⑧">(9)</a> <a href="#ref-for-imagebitmapsource⑨">(10)</a> <a href="#ref-for-imagebitmapsource①⓪">(11)</a> <a href="#ref-for-imagebitmapsource①①">(12)</a>
    <li><a href="#ref-for-imagebitmapsource①②">2.2. Face Detection API</a> <a href="#ref-for-imagebitmapsource①③">(2)</a> <a href="#ref-for-imagebitmapsource①④">(3)</a>
    <li><a href="#ref-for-imagebitmapsource①⑤">2.3. Barcode Detection API</a> <a href="#ref-for-imagebitmapsource①⑥">(2)</a> <a href="#ref-for-imagebitmapsource①⑦">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-serializable">
   <a href="https://html.spec.whatwg.org/multipage/structured-data.html#serializable">https://html.spec.whatwg.org/multipage/structured-data.html#serializable</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-serializable">2.2.2. DetectedFace</a>
    <li><a href="#ref-for-serializable①">2.3.2. DetectedBarcode</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-in-parallel">
   <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel">https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-in-parallel">2.3. Barcode Detection API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-media-readystate">
   <a href="https://html.spec.whatwg.org/multipage/media.html#dom-media-readystate">https://html.spec.whatwg.org/multipage/media.html#dom-media-readystate</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-media-readystate">2.1. Image sources for detection</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMException">
   <a href="https://heycam.github.io/webidl/#idl-DOMException">https://heycam.github.io/webidl/#idl-DOMException</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMException">2.1. Image sources for detection</a> <a href="#ref-for-idl-DOMException①">(2)</a> <a href="#ref-for-idl-DOMException②">(3)</a> <a href="#ref-for-idl-DOMException③">(4)</a> <a href="#ref-for-idl-DOMException④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">2.3. Barcode Detection API</a>
    <li><a href="#ref-for-idl-DOMString①">2.3.2. DetectedBarcode</a> <a href="#ref-for-idl-DOMString②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">2.2. Face Detection API</a>
    <li><a href="#ref-for-Exposed①">2.2.2. DetectedFace</a>
    <li><a href="#ref-for-Exposed②">2.3. Barcode Detection API</a>
    <li><a href="#ref-for-Exposed③">2.3.2. DetectedBarcode</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-invalidstateerror">
   <a href="https://heycam.github.io/webidl/#invalidstateerror">https://heycam.github.io/webidl/#invalidstateerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invalidstateerror">2.1. Image sources for detection</a> <a href="#ref-for-invalidstateerror①">(2)</a> <a href="#ref-for-invalidstateerror②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-SameObject">
   <a href="https://heycam.github.io/webidl/#SameObject">https://heycam.github.io/webidl/#SameObject</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-SameObject">2.2.2. DetectedFace</a> <a href="#ref-for-SameObject①">(2)</a>
    <li><a href="#ref-for-SameObject②">2.3.2. DetectedBarcode</a> <a href="#ref-for-SameObject③">(2)</a> <a href="#ref-for-SameObject④">(3)</a> <a href="#ref-for-SameObject⑤">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-SecureContext">
   <a href="https://heycam.github.io/webidl/#SecureContext">https://heycam.github.io/webidl/#SecureContext</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-SecureContext">2.2. Face Detection API</a>
    <li><a href="#ref-for-SecureContext①">2.2.2. DetectedFace</a>
    <li><a href="#ref-for-SecureContext②">2.3. Barcode Detection API</a>
    <li><a href="#ref-for-SecureContext③">2.3.2. DetectedBarcode</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-securityerror">
   <a href="https://heycam.github.io/webidl/#securityerror">https://heycam.github.io/webidl/#securityerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-securityerror">2.1. Image sources for detection</a> <a href="#ref-for-securityerror①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-boolean">
   <a href="https://heycam.github.io/webidl/#idl-boolean">https://heycam.github.io/webidl/#idl-boolean</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-boolean">2.2.1. FaceDetectorOptions</a> <a href="#ref-for-idl-boolean①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-sequence">
   <a href="https://heycam.github.io/webidl/#idl-sequence">https://heycam.github.io/webidl/#idl-sequence</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-sequence">2.2.2. DetectedFace</a>
    <li><a href="#ref-for-idl-sequence①">2.3.2. DetectedBarcode</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-unsigned-short">
   <a href="https://heycam.github.io/webidl/#idl-unsigned-short">https://heycam.github.io/webidl/#idl-unsigned-short</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-unsigned-short">2.2.1. FaceDetectorOptions</a> <a href="#ref-for-idl-unsigned-short①">(2)</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[ECMASCRIPT]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-sec-array-objects" style="color:initial">Array</span>
     <li><span class="dfn-paneled" id="term-for-sec-promise-objects" style="color:initial">Promise</span>
     <li><span class="dfn-paneled" id="term-for-sec-native-error-types-used-in-this-standard-typeerror" style="color:initial">TypeError</span>
    </ul>
   <li>
    <a data-link-type="biblio">[geometry-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-domrectreadonly" style="color:initial">DOMRectReadOnly</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-dom-media-have_metadata" style="color:initial">HAVE_METADATA</span>
     <li><span class="dfn-paneled" id="term-for-dom-media-have_nothing" style="color:initial">HAVE_NOTHING</span>
     <li><span class="dfn-paneled" id="term-for-htmlcanvaselement" style="color:initial">HTMLCanvasElement</span>
     <li><span class="dfn-paneled" id="term-for-htmlimageelement" style="color:initial">HTMLImageElement</span>
     <li><span class="dfn-paneled" id="term-for-htmlvideoelement" style="color:initial">HTMLVideoElement</span>
     <li><span class="dfn-paneled" id="term-for-imagebitmapsource" style="color:initial">ImageBitmapSource</span>
     <li><span class="dfn-paneled" id="term-for-serializable" style="color:initial">Serializable</span>
     <li><span class="dfn-paneled" id="term-for-in-parallel" style="color:initial">in parallel</span>
     <li><span class="dfn-paneled" id="term-for-dom-media-readystate" style="color:initial">readyState</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMException" style="color:initial">DOMException</span>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-invalidstateerror" style="color:initial">InvalidStateError</span>
     <li><span class="dfn-paneled" id="term-for-SameObject" style="color:initial">SameObject</span>
     <li><span class="dfn-paneled" id="term-for-SecureContext" style="color:initial">SecureContext</span>
     <li><span class="dfn-paneled" id="term-for-securityerror" style="color:initial">SecurityError</span>
     <li><span class="dfn-paneled" id="term-for-idl-boolean" style="color:initial">boolean</span>
     <li><span class="dfn-paneled" id="term-for-idl-sequence" style="color:initial">sequence</span>
     <li><span class="dfn-paneled" id="term-for-idl-unsigned-short" style="color:initial">unsigned short</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-ecmascript">[ECMASCRIPT]
   <dd><a href="https://tc39.github.io/ecma262/">ECMAScript Language Specification</a>. URL: <a href="https://tc39.github.io/ecma262/">https://tc39.github.io/ecma262/</a>
   <dt id="biblio-geometry-1">[GEOMETRY-1]
   <dd>Simon Pieters; Chris Harrelson. <a href="https://www.w3.org/TR/geometry-1/">Geometry Interfaces Module Level 1</a>. 4 December 2018. CR. URL: <a href="https://www.w3.org/TR/geometry-1/">https://www.w3.org/TR/geometry-1/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-bc2">[BC2]
   <dd>ANSI/AIM-BC2, Uniform Symbol Specification - Interleaved 2 of 5. 1995. 
   <dt id="biblio-bc5">[BC5]
   <dd>ANSI/AIM-BC5, Uniform Symbol Specification - Code 93. 1995. 
   <dt id="biblio-iso15417">[ISO15417]
   <dd><a href="https://www.iso.org/standard/43896.html">Information technology -- Automatic identification and data capture techniques -- Code 128 bar code symbology specification</a>. June 2007. URL: <a href="https://www.iso.org/standard/43896.html">https://www.iso.org/standard/43896.html</a>
   <dt id="biblio-iso15420">[ISO15420]
   <dd><a href="https://www.iso.org/standard/46143.html">Information technology -- Automatic identification and data capture techniques -- EAN/UPC bar code symbology specification</a>. Decemver 2009. URL: <a href="https://www.iso.org/standard/46143.html">https://www.iso.org/standard/46143.html</a>
   <dt id="biblio-iso15438">[ISO15438]
   <dd><a href="https://www.iso.org/standard/65502.html">Information technology -- Automatic identification and data capture techniques -- PDF417 bar code symbology specification</a>. September 2015. URL: <a href="https://www.iso.org/standard/65502.html">https://www.iso.org/standard/65502.html</a>
   <dt id="biblio-iso16022">[ISO16022]
   <dd><a href="https://www.iso.org/standard/44230.html">Information technology -- Automatic identification and data capture techniques -- Data Matrix bar code symbology specification</a>. September 2009. URL: <a href="https://www.iso.org/standard/44230.html">https://www.iso.org/standard/44230.html</a>
   <dt id="biblio-iso16388">[ISO16388]
   <dd><a href="https://www.iso.org/standard/43897.html">nformation technology -- Automatic identification and data capture techniques -- Code 39 bar code symbology specification</a>. May 2007. URL: <a href="https://www.iso.org/standard/43897.html">https://www.iso.org/standard/43897.html</a>
   <dt id="biblio-iso18004">[ISO18004]
   <dd><a href="https://www.iso.org/standard/62021.html">Information technology -- Automatic identification and data capture techniques -- QR Code bar code symbology specification</a>. February 2015. URL: <a href="https://www.iso.org/standard/62021.html">https://www.iso.org/standard/62021.html</a>
   <dt id="biblio-iso24778">[ISO24778]
   <dd><a href="https://www.iso.org/standard/62021.html">Information technology -- Automatic identification and data capture techniques -- Aztec Code bar code symbology specification</a>. February 2008. URL: <a href="https://www.iso.org/standard/62021.html">https://www.iso.org/standard/62021.html</a>
   <dt id="biblio-text-detection-api">[TEXT-DETECTION-API]
   <dd><a href="https://wicg.github.io/shape-detection-api/text.html">Accelerated Text Detection in Images</a>. Living Standard. URL: <a href="https://wicg.github.io/shape-detection-api/text.html">https://wicg.github.io/shape-detection-api/text.html</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed④"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->),
 <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext④"><c- g>SecureContext</c-></a>]
<c- b>interface</c-> <a href="#facedetector"><code><c- g>FaceDetector</c-></code></a> {
  <a class="idl-code" data-link-type="constructor" href="#dom-facedetector-facedetector" id="ref-for-dom-facedetector-facedetector①"><c- g>constructor</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-facedetectoroptions" id="ref-for-dictdef-facedetectoroptions①①"><c- n>FaceDetectorOptions</c-></a> <a href="#dom-facedetector-facedetector-facedetectoroptions-facedetectoroptions"><code><c- g>faceDetectorOptions</c-></code></a> = {});
  <c- b>Promise</c->&lt;<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#detectedface" id="ref-for-detectedface①①"><c- n>DetectedFace</c-></a>>> <a class="idl-code" data-link-type="method" href="#dom-facedetector-detect" id="ref-for-dom-facedetector-detect①①"><c- g>detect</c-></a>(<a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmapsource" id="ref-for-imagebitmapsource①③①"><c- n>ImageBitmapSource</c-></a> <a href="#dom-facedetector-detect-image-image"><code><c- g>image</c-></code></a>);
};

<c- b>dictionary</c-> <a href="#dictdef-facedetectoroptions"><code><c- g>FaceDetectorOptions</c-></code></a> {
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-short" id="ref-for-idl-unsigned-short②"><c- b>unsigned</c-> <c- b>short</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="unsigned short " href="#dom-facedetectoroptions-maxdetectedfaces" id="ref-for-dom-facedetectoroptions-maxdetectedfaces①"><c- g>maxDetectedFaces</c-></a>;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean②"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="boolean " href="#dom-facedetectoroptions-fastmode" id="ref-for-dom-facedetectoroptions-fastmode①"><c- g>fastMode</c-></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①①"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->),
 <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext①①"><c- g>SecureContext</c-></a>,
 <a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/structured-data.html#serializable" id="ref-for-serializable②"><c- g>Serializable</c-></a>]
<c- b>interface</c-> <a href="#detectedface"><code><c- g>DetectedFace</c-></code></a> {
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject⑥"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly④"><c- n>DOMRectReadOnly</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMRectReadOnly" href="#dom-detectedface-boundingbox" id="ref-for-dom-detectedface-boundingbox①①"><c- g>boundingBox</c-></a>;
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject①①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#dictdef-landmark" id="ref-for-dictdef-landmark②"><c- n>Landmark</c-></a>>? <a class="idl-code" data-link-type="attribute" data-readonly data-type="FrozenArray<Landmark>?" href="#dom-detectedface-landmarks" id="ref-for-dom-detectedface-landmarks①"><c- g>landmarks</c-></a>;
};

<c- b>dictionary</c-> <a href="#dictdef-landmark"><code><c- g>Landmark</c-></code></a> {
  <c- b>required</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="https://w3c.github.io/mediacapture-image/#Point2D" id="ref-for-Point2D⑤"><c- n>Point2D</c-></a>> <a class="idl-code" data-link-type="dict-member" data-type="FrozenArray<Point2D> " href="#dom-landmark-locations" id="ref-for-dom-landmark-locations①"><c- g>locations</c-></a>;
  <a class="n" data-link-type="idl-name" href="#enumdef-landmarktype" id="ref-for-enumdef-landmarktype②"><c- n>LandmarkType</c-></a> <a class="idl-code" data-link-type="dict-member" data-type="LandmarkType " href="#dom-landmark-type" id="ref-for-dom-landmark-type①"><c- g>type</c-></a>;
};

<c- b>enum</c-> <a href="#enumdef-landmarktype"><code><c- g>LandmarkType</c-></code></a> {
  <a class="idl-code" data-link-type="enum-value" href="#dom-landmarktype-mouth" id="ref-for-dom-landmarktype-mouth①"><c- s>"mouth"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-landmarktype-eye" id="ref-for-dom-landmarktype-eye①"><c- s>"eye"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-landmarktype-nose" id="ref-for-dom-landmarktype-nose①"><c- s>"nose"</c-></a>
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②①"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->),
 <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext②①"><c- g>SecureContext</c-></a>]
<c- b>interface</c-> <a href="#barcodedetector"><code><c- g>BarcodeDetector</c-></code></a> {
  <a class="idl-code" data-link-type="constructor" href="#dom-barcodedetector-barcodedetector" id="ref-for-dom-barcodedetector-barcodedetector①"><c- g>constructor</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-barcodedetectoroptions" id="ref-for-dictdef-barcodedetectoroptions②"><c- n>BarcodeDetectorOptions</c-></a> <a href="#dom-barcodedetector-barcodedetector-barcodedetectoroptions-barcodedetectoroptions"><code><c- g>barcodeDetectorOptions</c-></code></a> = {});
  <c- b>static</c-> <c- b>Promise</c->&lt;<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#enumdef-barcodeformat" id="ref-for-enumdef-barcodeformat①⓪"><c- n>BarcodeFormat</c-></a>>> <a class="idl-code" data-link-type="method" href="#dom-barcodedetector-getsupportedformats" id="ref-for-dom-barcodedetector-getsupportedformats①"><c- g>getSupportedFormats</c-></a>();

  <c- b>Promise</c->&lt;<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#detectedbarcode" id="ref-for-detectedbarcode①①"><c- n>DetectedBarcode</c-></a>>> <a class="idl-code" data-link-type="method" href="#dom-barcodedetector-detect" id="ref-for-dom-barcodedetector-detect①①"><c- g>detect</c-></a>(<a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#imagebitmapsource" id="ref-for-imagebitmapsource①⑥①"><c- n>ImageBitmapSource</c-></a> <a href="#dom-barcodedetector-detect-image-image"><code><c- g>image</c-></code></a>);
};

<c- b>dictionary</c-> <a href="#dictdef-barcodedetectoroptions"><code><c- g>BarcodeDetectorOptions</c-></code></a> {
  <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#enumdef-barcodeformat" id="ref-for-enumdef-barcodeformat③①"><c- n>BarcodeFormat</c-></a>> <a class="idl-code" data-link-type="dict-member" data-type="sequence<BarcodeFormat> " href="#dom-barcodedetectoroptions-formats" id="ref-for-dom-barcodedetectoroptions-formats②①"><c- g>formats</c-></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed③①"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->),
 <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext③①"><c- g>SecureContext</c-></a>,
 <a class="idl-code" data-link-type="extended-attribute" href="https://html.spec.whatwg.org/multipage/structured-data.html#serializable" id="ref-for-serializable①①"><c- g>Serializable</c-></a>]
<c- b>interface</c-> <a href="#detectedbarcode"><code><c- g>DetectedBarcode</c-></code></a> {
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject②①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://drafts.fxtf.org/geometry-1/#domrectreadonly" id="ref-for-domrectreadonly②①"><c- n>DOMRectReadOnly</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMRectReadOnly" href="#dom-detectedbarcode-boundingbox" id="ref-for-dom-detectedbarcode-boundingbox①①"><c- g>boundingBox</c-></a>;
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject③①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①①"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-detectedbarcode-rawvalue" id="ref-for-dom-detectedbarcode-rawvalue①①"><c- g>rawValue</c-></a>;
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject④①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-barcodeformat" id="ref-for-enumdef-barcodeformat⑥①"><c- n>BarcodeFormat</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="BarcodeFormat" href="#dom-detectedbarcode-format" id="ref-for-dom-detectedbarcode-format①"><c- g>format</c-></a>;
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject⑤①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="https://w3c.github.io/mediacapture-image/#Point2D" id="ref-for-Point2D③①"><c- n>Point2D</c-></a>> <a class="idl-code" data-link-type="attribute" data-readonly data-type="FrozenArray<Point2D>" href="#dom-detectedbarcode-cornerpoints" id="ref-for-dom-detectedbarcode-cornerpoints①"><c- g>cornerPoints</c-></a>;
};

<c- b>enum</c-> <a href="#enumdef-barcodeformat"><code><c- g>BarcodeFormat</c-></code></a> {
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-aztec" id="ref-for-dom-barcodeformat-aztec①"><c- s>"aztec"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-code_128" id="ref-for-dom-barcodeformat-code_128①"><c- s>"code_128"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-code_39" id="ref-for-dom-barcodeformat-code_39①"><c- s>"code_39"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-code_93" id="ref-for-dom-barcodeformat-code_93①"><c- s>"code_93"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-codabar" id="ref-for-dom-barcodeformat-codabar①"><c- s>"codabar"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-data_matrix" id="ref-for-dom-barcodeformat-data_matrix①"><c- s>"data_matrix"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-ean_13" id="ref-for-dom-barcodeformat-ean_13①"><c- s>"ean_13"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-ean_8" id="ref-for-dom-barcodeformat-ean_8①"><c- s>"ean_8"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-itf" id="ref-for-dom-barcodeformat-itf①"><c- s>"itf"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-pdf417" id="ref-for-dom-barcodeformat-pdf417①"><c- s>"pdf417"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-qr_code" id="ref-for-dom-barcodeformat-qr_code①"><c- s>"qr_code"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-unknown" id="ref-for-dom-barcodeformat-unknown①①"><c- s>"unknown"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-upc_a" id="ref-for-dom-barcodeformat-upc_a①"><c- s>"upc_a"</c-></a>,
  <a class="idl-code" data-link-type="enum-value" href="#dom-barcodeformat-upc_e" id="ref-for-dom-barcodeformat-upc_e①"><c- s>"upc_e"</c-></a>
};

</pre>
  <aside class="dfn-panel" data-for="facedetector">
   <b><a href="#facedetector">#facedetector</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-facedetector">2.2. Face Detection API</a> <a href="#ref-for-facedetector①">(2)</a> <a href="#ref-for-facedetector②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-facedetector-facedetector">
   <b><a href="#dom-facedetector-facedetector">#dom-facedetector-facedetector</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-facedetector-facedetector">2.2. Face Detection API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-facedetector-detect">
   <b><a href="#dom-facedetector-detect">#dom-facedetector-detect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-facedetector-detect">2.2. Face Detection API</a> <a href="#ref-for-dom-facedetector-detect①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-facedetectoroptions">
   <b><a href="#dictdef-facedetectoroptions">#dictdef-facedetectoroptions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-facedetectoroptions">2.2. Face Detection API</a> <a href="#ref-for-dictdef-facedetectoroptions①">(2)</a>
    <li><a href="#ref-for-dictdef-facedetectoroptions②">2.2.1. FaceDetectorOptions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-facedetectoroptions-maxdetectedfaces">
   <b><a href="#dom-facedetectoroptions-maxdetectedfaces">#dom-facedetectoroptions-maxdetectedfaces</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-facedetectoroptions-maxdetectedfaces">2.2.1. FaceDetectorOptions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-facedetectoroptions-fastmode">
   <b><a href="#dom-facedetectoroptions-fastmode">#dom-facedetectoroptions-fastmode</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-facedetectoroptions-fastmode">2.2.1. FaceDetectorOptions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="detectedface">
   <b><a href="#detectedface">#detectedface</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-detectedface">2.2. Face Detection API</a> <a href="#ref-for-detectedface①">(2)</a> <a href="#ref-for-detectedface②">(3)</a>
    <li><a href="#ref-for-detectedface③">2.2.2. DetectedFace</a> <a href="#ref-for-detectedface④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-detectedface-boundingbox">
   <b><a href="#dom-detectedface-boundingbox">#dom-detectedface-boundingbox</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-detectedface-boundingbox">2.2. Face Detection API</a>
    <li><a href="#ref-for-dom-detectedface-boundingbox①">2.2.2. DetectedFace</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-detectedface-landmarks">
   <b><a href="#dom-detectedface-landmarks">#dom-detectedface-landmarks</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-detectedface-landmarks">2.2.2. DetectedFace</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-landmark">
   <b><a href="#dictdef-landmark">#dictdef-landmark</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-landmark">2.2.2. DetectedFace</a> <a href="#ref-for-dictdef-landmark①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-landmark-locations">
   <b><a href="#dom-landmark-locations">#dom-landmark-locations</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-landmark-locations">2.2.2. DetectedFace</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-landmark-type">
   <b><a href="#dom-landmark-type">#dom-landmark-type</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-landmark-type">2.2.2. DetectedFace</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enumdef-landmarktype">
   <b><a href="#enumdef-landmarktype">#enumdef-landmarktype</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-landmarktype">2.2.2. DetectedFace</a> <a href="#ref-for-enumdef-landmarktype①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-landmarktype-mouth">
   <b><a href="#dom-landmarktype-mouth">#dom-landmarktype-mouth</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-landmarktype-mouth">2.2.2. DetectedFace</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-landmarktype-eye">
   <b><a href="#dom-landmarktype-eye">#dom-landmarktype-eye</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-landmarktype-eye">2.2.2. DetectedFace</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-landmarktype-nose">
   <b><a href="#dom-landmarktype-nose">#dom-landmarktype-nose</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-landmarktype-nose">2.2.2. DetectedFace</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="barcodedetector">
   <b><a href="#barcodedetector">#barcodedetector</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-barcodedetector">2.3. Barcode Detection API</a> <a href="#ref-for-barcodedetector①">(2)</a> <a href="#ref-for-barcodedetector②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-barcodedetector-barcodedetector">
   <b><a href="#dom-barcodedetector-barcodedetector">#dom-barcodedetector-barcodedetector</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-barcodedetector-barcodedetector">2.3. Barcode Detection API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-barcodedetector-getsupportedformats">
   <b><a href="#dom-barcodedetector-getsupportedformats">#dom-barcodedetector-getsupportedformats</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-barcodedetector-getsupportedformats">2.3. Barcode Detection API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-barcodedetector-detect">
   <b><a href="#dom-barcodedetector-detect">#dom-barcodedetector-detect</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-barcodedetector-detect">2.3. Barcode Detection API</a> <a href="#ref-for-dom-barcodedetector-detect①">(2)</a>
    <li><a href="#ref-for-dom-barcodedetector-detect②">2.3.1. BarcodeDetectorOptions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-barcodedetectoroptions">
   <b><a href="#dictdef-barcodedetectoroptions">#dictdef-barcodedetectoroptions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-barcodedetectoroptions">2.3. Barcode Detection API</a>
    <li><a href="#ref-for-dictdef-barcodedetectoroptions①">2.3.1. BarcodeDetectorOptions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-barcodedetectoroptions-formats">
   <b><a href="#dom-barcodedetectoroptions-formats">#dom-barcodedetectoroptions-formats</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-barcodedetectoroptions-formats">2.3. Barcode Detection API</a> <a href="#ref-for-dom-barcodedetectoroptions-formats①">(2)</a>
    <li><a href="#ref-for-dom-barcodedetectoroptions-formats②">2.3.1. BarcodeDetectorOptions</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="detectedbarcode">
   <b><a href="#detectedbarcode">#detectedbarcode</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-detectedbarcode">2.3. Barcode Detection API</a> <a href="#ref-for-detectedbarcode①">(2)</a>
    <li><a href="#ref-for-detectedbarcode②">2.3.2. DetectedBarcode</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-detectedbarcode-boundingbox">
   <b><a href="#dom-detectedbarcode-boundingbox">#dom-detectedbarcode-boundingbox</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-detectedbarcode-boundingbox">2.3. Barcode Detection API</a>
    <li><a href="#ref-for-dom-detectedbarcode-boundingbox①">2.3.2. DetectedBarcode</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-detectedbarcode-rawvalue">
   <b><a href="#dom-detectedbarcode-rawvalue">#dom-detectedbarcode-rawvalue</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-detectedbarcode-rawvalue">2.3. Barcode Detection API</a>
    <li><a href="#ref-for-dom-detectedbarcode-rawvalue①">2.3.2. DetectedBarcode</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-detectedbarcode-format">
   <b><a href="#dom-detectedbarcode-format">#dom-detectedbarcode-format</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-detectedbarcode-format">2.3.2. DetectedBarcode</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-detectedbarcode-cornerpoints">
   <b><a href="#dom-detectedbarcode-cornerpoints">#dom-detectedbarcode-cornerpoints</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-detectedbarcode-cornerpoints">2.3.2. DetectedBarcode</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enumdef-barcodeformat">
   <b><a href="#enumdef-barcodeformat">#enumdef-barcodeformat</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-barcodeformat">2.3. Barcode Detection API</a> <a href="#ref-for-enumdef-barcodeformat①">(2)</a> <a href="#ref-for-enumdef-barcodeformat②">(3)</a>
    <li><a href="#ref-for-enumdef-barcodeformat③">2.3.1. BarcodeDetectorOptions</a> <a href="#ref-for-enumdef-barcodeformat④">(2)</a> <a href="#ref-for-enumdef-barcodeformat⑤">(3)</a>
    <li><a href="#ref-for-enumdef-barcodeformat⑥">2.3.2. DetectedBarcode</a> <a href="#ref-for-enumdef-barcodeformat⑦">(2)</a> <a href="#ref-for-enumdef-barcodeformat⑧">(3)</a>
    <li><a href="#ref-for-enumdef-barcodeformat⑨">2.3.3. BarcodeFormat</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-barcodeformat-aztec">
   <b><a href="#dom-barcodeformat-aztec">#dom-barcodeformat-aztec</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-barcodeformat-aztec">2.3.3. BarcodeFormat</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-barcodeformat-code_128">
   <b><a href="#dom-barcodeformat-code_128">#dom-barcodeformat-code_128</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-barcodeformat-code_128">2.3.3. BarcodeFormat</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="code-128">
   <b><a href="#code-128">#code-128</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-code-128">2.3.3. BarcodeFormat</a> <a href="#ref-for-code-128①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-barcodeformat-code_39">
   <b><a href="#dom-barcodeformat-code_39">#dom-barcodeformat-code_39</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-barcodeformat-code_39">2.3.3. BarcodeFormat</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="code-39">
   <b><a href="#code-39">#code-39</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-code-39">2.3.3. BarcodeFormat</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-barcodeformat-code_93">
   <b><a href="#dom-barcodeformat-code_93">#dom-barcodeformat-code_93</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-barcodeformat-code_93">2.3.3. BarcodeFormat</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-barcodeformat-codabar">
   <b><a href="#dom-barcodeformat-codabar">#dom-barcodeformat-codabar</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-barcodeformat-codabar">2.3.3. BarcodeFormat</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-barcodeformat-data_matrix">
   <b><a href="#dom-barcodeformat-data_matrix">#dom-barcodeformat-data_matrix</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-barcodeformat-data_matrix">2.3.3. BarcodeFormat</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-barcodeformat-ean_13">
   <b><a href="#dom-barcodeformat-ean_13">#dom-barcodeformat-ean_13</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-barcodeformat-ean_13">2.3.3. BarcodeFormat</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="ean-13">
   <b><a href="#ean-13">#ean-13</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-ean-13">2.3.3. BarcodeFormat</a> <a href="#ref-for-ean-13①">(2)</a> <a href="#ref-for-ean-13②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-barcodeformat-ean_8">
   <b><a href="#dom-barcodeformat-ean_8">#dom-barcodeformat-ean_8</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-barcodeformat-ean_8">2.3.3. BarcodeFormat</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-barcodeformat-itf">
   <b><a href="#dom-barcodeformat-itf">#dom-barcodeformat-itf</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-barcodeformat-itf">2.3.3. BarcodeFormat</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-barcodeformat-pdf417">
   <b><a href="#dom-barcodeformat-pdf417">#dom-barcodeformat-pdf417</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-barcodeformat-pdf417">2.3.3. BarcodeFormat</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-barcodeformat-qr_code">
   <b><a href="#dom-barcodeformat-qr_code">#dom-barcodeformat-qr_code</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-barcodeformat-qr_code">2.3.3. BarcodeFormat</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-barcodeformat-unknown">
   <b><a href="#dom-barcodeformat-unknown">#dom-barcodeformat-unknown</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-barcodeformat-unknown">2.3. Barcode Detection API</a>
    <li><a href="#ref-for-dom-barcodeformat-unknown①">2.3.3. BarcodeFormat</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-barcodeformat-upc_a">
   <b><a href="#dom-barcodeformat-upc_a">#dom-barcodeformat-upc_a</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-barcodeformat-upc_a">2.3.3. BarcodeFormat</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="upc-a">
   <b><a href="#upc-a">#upc-a</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-upc-a">2.3.3. BarcodeFormat</a> <a href="#ref-for-upc-a①">(2)</a> <a href="#ref-for-upc-a②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-barcodeformat-upc_e">
   <b><a href="#dom-barcodeformat-upc_e">#dom-barcodeformat-upc_e</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-barcodeformat-upc_e">2.3.3. BarcodeFormat</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>